/* =============================================================================
   template-styles.css
   Shared stylesheet for custom WTG ACF block templates.
   Location: ../kalium-child/template-parts/blocks/wtg-templates/template-styles.css
   Enqueue once, site-wide. DO NOT rewrite this file from scratch — new blocks
   append a new clearly-commented section at the bottom.

   CONVENTIONS
   - Every rule that targets our own block markup is chained as
     ".custom .wtg-x-section .wtg-target" (or similar) so it reliably beats
     the site's own ".custom .ps-container" / ".custom .ps-section" rules
     (specificity 0,2,0) regardless of stylesheet load order, without
     needing !important.
   - Design tokens shared by more than one block live as CSS custom
     properties on ".custom" (below) instead of being repeated as literal
     hex/rem values block by block.
   - Wherever a block accepts free-text WYSIWYG content, links inside that
     content are upgraded to the site's real ".inline-link" class from PHP
     (see the "wtg_add_link_class" helper in the relevant template) rather
     than re-implemented in CSS — this also means those links automatically
     pick up the site-wide ".custom .inline-link:after{content:none}" rule
     that suppresses Kalium's hover pseudo-element, with nothing extra
     needed here.
   ============================================================================= */

/* =============================================================================
   GLOBAL: Design tokens
   Shared across every block below. Defined on ".custom" (not ":root") so
   they only ever apply inside the site's own ".custom" ancestor scope.
   ============================================================================= */
.custom{
	--wtg-border:#e0e0e0;      /* light "card" border color, replacing near-grey one-offs */
	--wtg-text-base:.9rem;     /* harmonized body-copy size, replacing the .88–1rem drift
	                              that had crept in block by block (site default is .95rem) */
}

/* =============================================================================
   GLOBAL: Stacking order for decorative full-bleed elements
   Two site-wide utility classes interact in a way that can break both
   visuals and interactivity if left to their defaults:
     - ".custom .ps-section.dark" is given z-index:-1 by custom.css, which
       is fine for a section that's purely a background wash, but drops any
       real interactive content inside it (buttons, inputs, links) behind
       ordinary in-flow content around it — clicks land on the wrong thing.
     - ".band-white" (z-index:99, but scoped to whatever stacking context
       its own section happens to create) can end up rendered BEHIND an
       adjacent dark section if that section has a higher effective
       stacking level, even though it's meant to sit on top as a decorative
       "seam" between two sections.
   Fixed here, scoped to ".wtg-block-scope" (the wrapper every WTG block
   that needs it already renders itself in) so this never touches
   .ps-section.dark usage elsewhere on the site.

   IMPORTANT: ".custom" and ".wtg-block-scope" are always two classes on the
   SAME wrapper div (`<div class="custom wtg-block-scope">`), never nested —
   so this has to be written as the compound selector ".custom.wtg-block-scope"
   (no space). ".custom .wtg-block-scope" (with a space) is a descendant
   selector that requires two different elements and would never match here.

     1. Any dark WTG section gets a small positive z-index, so its own
        content stacks normally above surrounding page content again.
     2. The band sits at a deliberately higher z-index than that, so it is
        always painted on top of whichever section it overlaps.
     3. The band itself gets pointer-events:none — it's purely decorative,
        so even sitting on top it can never intercept a click meant for
        the button/link beneath or beside it.
   ============================================================================= */
.custom.wtg-block-scope .ps-section.dark{
	position:relative;
	z-index:1;
}
.custom.wtg-block-scope .band-white{
	pointer-events:none;
}

/* =============================================================================
   BLOCK: Content & Grid
   Template: wtg-templates/content-grid/content-grid.php
   ============================================================================= */
 
/* Defense-in-depth: plain (unprefixed) selectors so the section and
   container center and size correctly even if the site-wide ".custom"
   ancestor selectors don't end up matching in a given page context. */
.wtg-cgrid-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-cgrid-container{
	width:100%;
	max-width:1300px;
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
}
 
.custom .wtg-cgrid-section{
	padding:4rem 1.5rem;
}
.custom .wtg-cgrid-section.wtg-cgrid-bg-dark{
	background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A));
}
.custom .wtg-cgrid-container{
	text-align:left;
}
.custom .wtg-cgrid-container.wtg-cgrid-align-center{
	text-align:center;
}
 
/* Dark scheme: color is forced on every relevant child rather than relying
   on the site-wide .text-white utility, which only covers p/h1/h2/h3 and
   would silently leave list items black-on-dark. Links don't need a color
   override here — the PHP template (see wtg_add_link_class() in
   content-grid.php) already switches them to ".inline-link.white"
   specifically when this dark scheme is selected, and to plain
   ".inline-link" (black) on the light scheme, so the right contrast is
   picked per scheme automatically. */
.custom .wtg-cgrid-bg-dark .wtg-cgrid-container h2,
.custom .wtg-cgrid-bg-dark .wtg-cgrid-text,
.custom .wtg-cgrid-bg-dark .wtg-cgrid-text p,
.custom .wtg-cgrid-bg-dark .wtg-cgrid-text li,
.custom .wtg-cgrid-bg-dark .wtg-cgrid-text ul,
.custom .wtg-cgrid-bg-dark .wtg-cgrid-text ol{ color:#fff !important; }
 
/* Cards always stay white/dark-text regardless of section scheme, so the
   grid keeps working as a set of readable "panels" on a dark band. */
.custom .wtg-cgrid-text{ margin-top:1rem; }
.custom .wtg-cgrid-text p{ font-size:var(--wtg-text-base); margin-bottom:1rem; }
.custom .wtg-cgrid-text p:last-child{ margin-bottom:0; }

/* Links typed into this WYSIWYG field are upgraded to the real
   ".inline-link" class from PHP — this rule only "forces" the size so it
   always matches the harmonized body copy above, regardless of which
   element the link happens to sit inside. No Kalium hover-pseudo
   neutralizing needed here: ".custom .inline-link:after" already handles
   that site-wide once the class is present. */
.custom .wtg-cgrid-text a.inline-link{ font-size:var(--wtg-text-base); }
 
.custom .wtg-cgrid-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:1.875rem;
	margin-top:2.5rem;
	width:100%;
}
.custom .wtg-cgrid-container.wtg-cgrid-align-center .wtg-cgrid-grid{ justify-content:center; }
 
.custom .wtg-cgrid-card{
	background:#fff;
	border:1px solid var(--wtg-border);
	border-radius:12px;
	padding:1.875rem;
	transition:transform .5s ease;
}
/* Not an <a> — this card has no single destination of its own — so a
   subtle hover "grow" is purely a visual hint of interactivity elsewhere
   on the card (e.g. a link inside the text), not a click affordance for
   the card itself. */
.custom .wtg-cgrid-card:hover{ transform:scale(1.008); }
/* No text-align set here on purpose — the card heading/copy inherit it from
   ".wtg-cgrid-container" (left, or centered via .wtg-cgrid-align-center), so
   the section's alignment choice reaches the cards too, not just the intro. */
.custom .wtg-cgrid-grid .wtg-cgrid-card h3{
	font-size:1.1rem;
	font-weight:600;
	margin-bottom:1rem;
	color:#000;
}
.custom .wtg-cgrid-grid .wtg-cgrid-card p{
	font-size:var(--wtg-text-base);
	margin-bottom:0;
	color:black;
}
.custom .wtg-cgrid-card-image{
	height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:1.25rem;
}
.custom .wtg-cgrid-card-image img{
	max-width:100px;
	max-height:80px;
	object-fit:contain;
}
 
@media screen and (max-width:768px){
	.custom .wtg-cgrid-section{ padding:2.5rem 1rem; }
}
@media screen and (max-width:600px){
	.custom .wtg-cgrid-grid{ grid-template-columns:1fr; gap:1.25rem; }
}
 
 
/* =============================================================================
   BLOCK: Split Content & Image
   Template: wtg-templates/split-content/split-content.php
   ============================================================================= */
 
/* Defense-in-depth: plain (unprefixed) selectors, same rationale as above. */
.wtg-split-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-split-container{
	width:100%;
	max-width:1300px;
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
}
 
.custom .wtg-split-section{ padding:4rem 1.5rem; }
@media screen and (max-width:768px){
	.custom .wtg-split-section{ padding:2.5rem 1rem; }
}
 
/* Mobile-first layout: stacked in a single column, text then image, is the
   UNCONDITIONAL DEFAULT — no override/media-query reset is needed to get
   there (same reasoning as .wtg-ctb-container). The side-by-side desktop
   layout is only ever added on top of this via the min-width query below. */
.custom .wtg-split-container{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:2.5rem;
}
.custom .wtg-split-text,
.custom .wtg-split-image{ width:100%; }
.custom .wtg-split-image{ display:flex; align-items:center; justify-content:center; }
.custom .wtg-split-image img{ width:100%; height:auto; border-radius:20px; object-fit:cover; display:block; }
 
.custom .wtg-split-body p{ font-size:var(--wtg-text-base); margin-bottom:1.2rem; }
.custom .wtg-split-body p:last-child{ margin-bottom:0; }
.custom .wtg-split-body ul{ padding-left:1.2rem; margin:0 0 1.2rem; }
.custom .wtg-split-body li{ margin-bottom:.6rem; font-size:var(--wtg-text-base); line-height:1.5; }
.custom .wtg-split-body li:last-child{ margin-bottom:0; }
.custom .wtg-split-body strong{ font-weight:700; }

/* Links typed into this WYSIWYG field are upgraded to the real ".inline-link"
   class from PHP (see wtg_add_link_class() in split-content.php) — this rule
   only "forces" the size so it always matches the block's harmonized body
   copy, regardless of which element the link happens to sit inside. No
   Kalium hover-pseudo neutralizing needed here: ".custom .inline-link:after"
   already handles that site-wide once the class is present. */
.custom .wtg-split-body a.inline-link{ font-size:var(--wtg-text-base); }
 
/* Side-by-side desktop layout — only switches on above 1024px, on top of
   the stacked mobile-first default above. Text always renders before the
   image in the markup, so "image-left" only changes the *visual* order via
   row-reverse here; below this breakpoint that reversal never applies, so
   the image is always below the text regardless of which side it was set
   to display on. */
@media screen and (min-width:1025px){
	.custom .wtg-split-container{
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		gap:4rem;
	}
	.custom .wtg-split-container.wtg-split-image-left{ flex-direction:row-reverse; }
 
	/* flex-basis + min-width (instead of fixed 55/45% widths) so the text
	   column stops shrinking below a readable size before it would wrap. */
	.custom .wtg-split-text{ width:auto; flex:1 1 420px; min-width:320px; }
	.custom .wtg-split-image{ width:auto; flex:1 1 380px; min-width:280px; }
 
	/* No image: text becomes the only flex item — cap its width and center
	   it instead of letting it stretch across the full 1300px container. */
	.custom .wtg-split-container.wtg-split-no-image .wtg-split-text{
		max-width:800px;
		margin-left:auto;
		margin-right:auto;
	}
}

/* =============================================================================
   BLOCK: Two-column text
   Template: wtg-templates/two-column-text/two-column-text.php

   Uses real CSS multi-column layout (not a flex/grid 50-50 split) so the
   text reads as one continuous piece of copy that happens to be laid out
   in two columns — exactly like the source design, where the optional CTA
   simply falls wherever the text runs out rather than being pinned to a
   fixed "right column" position. "break-inside:avoid" on each paragraph
   (and the CTA) stops a single paragraph from being split awkwardly across
   the column break.
   ============================================================================= */
.custom .wtg-two-col-section.wtg-two-col-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-two-col-section.wtg-two-col-bg-white{ background:#fff; }

/* Full width so text-align actually has room to center/left-align against
   — without this, the heading is just an unconstrained flex item inside
   ".ps-container" (display:flex) and only ever shrinks to its own text
   width, regardless of the alignment choice below. */
.custom .wtg-two-col-heading{ width:100%; }
.custom .wtg-two-col-heading.wtg-two-col-heading-center{ text-align:center; }
.custom .wtg-two-col-heading.wtg-two-col-heading-left{ text-align:left; }

.custom .wtg-two-col-text{
	column-count:2;
	column-gap:3rem;
	width:100%;
}
.custom .wtg-two-col-text p{
	font-size:var(--wtg-text-base);
	line-height:1.6;
	margin:0 0 1.5rem;
	break-inside:avoid;
}
.custom .wtg-two-col-text p:last-child{ margin-bottom:0; }
.custom .wtg-two-col-text ul,
.custom .wtg-two-col-text ol{
	margin:0 0 1.5rem;
	padding-left:1.2rem;
	break-inside:avoid;
}
.custom .wtg-two-col-text li{ font-size:var(--wtg-text-base); line-height:1.6; margin-bottom:.6rem; }

/* Links typed into the body copy are upgraded to the real ".inline-link"
   class from PHP (see wtg_add_link_class() in two-column-text.php) — this
   rule only "forces" the size so it always matches the paragraph copy
   above. No Kalium hover-pseudo neutralizing needed here: ".custom
   .inline-link:after" already handles that site-wide once the class is
   present. */
.custom .wtg-two-col-text a.inline-link{ font-size:var(--wtg-text-base); }

.custom .wtg-two-col-cta{ margin:0; break-inside:avoid; }

/* "black" / "black-slide" CTA style: a real button below both columns
   (not part of the multi-column text-flow — see the note in
   two-column-text.php on why button styles are kept out of the columns). */
.custom .wtg-two-col-cta-button{ width:100%; margin-top:2rem; }

@media only screen and (max-width:768px){
	.custom .wtg-two-col-text{ column-count:1; }
}

/* =============================================================================
   BLOCK: Link cards
   Template: wtg-templates/link-cards/link-cards.php

   Left column is a fixed max-width intro; the right column of cards takes
   the remaining space (flexbox, not a fixed percentage split), so it
   naturally adapts whether the cards are in single-column "large" mode or
   the 2-column "compact" grid. Collapses to a stacked layout (intro above
   cards) at 910px, matching the breakpoint most other left/right WTG
   blocks already use.
   ============================================================================= */
.custom .wtg-links-container{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	gap:3rem;
}
.custom .wtg-links-section.wtg-links-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-links-section.wtg-links-bg-white{ background:#fff; }

.custom .wtg-links-intro{
	flex:0 1 380px;
	min-width:280px;
}
.custom .wtg-links-intro h2{ margin-bottom:1rem; }
.custom .wtg-links-subheading{
	font-size:var(--wtg-text-base);
	line-height:1.6;
	color:black;
	margin:0;
}

.custom .wtg-links-cards{
	display:flex;
	flex-direction:column;
	gap:1rem;
	flex:1 1 480px;
	min-width:300px;
}

.custom .wtg-links-card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1.5rem;
	background:#fff;
	border:1px solid var(--wtg-border);
	border-radius:16px;
	padding:1.5rem 2rem;
	text-decoration:none;
	box-sizing:border-box;
	transition:border-color .2s ease;
}
.custom .wtg-links-card:hover{ border-color:#b8b8b8; }

.custom .wtg-links-card-icon{
	flex-shrink:0;
	display:flex;
	align-items:center;
}
.custom .wtg-links-card-icon img{ width:32px; height:32px; object-fit:contain; }

.custom .wtg-links-card-text{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	min-width:0;
}
.custom .wtg-links-card-title{
	font-size:1rem;
	font-weight:600;
	color:#000;
	line-height:1.3;
}
.custom .wtg-links-card-subtitle{
	font-size:var(--wtg-text-base);
	color:black;
	margin-top:.3rem;
}

.custom .wtg-links-card-button{
	flex-shrink:0;
	width:44px;
	height:44px;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#000;
	color:#fff;
	font-size:1.1rem;
	line-height:1;
	transition:background-color .2s ease;
}
.custom .wtg-links-card:hover .wtg-links-card-button{ background:#262626; }

/* Compact mode: 4 or more links (see the count check in link-cards.php) —
   a 2-column grid instead of a single stacked column, with smaller cards,
   smaller text, and a smaller (still solid black) round button, so a
   longer list still reads as one glanceable grid instead of a long scroll
   of large rows. */
.custom .wtg-links-cards.wtg-links-cards-compact{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:1rem;
}
.custom .wtg-links-cards-compact .wtg-links-card{
	padding:1.1rem 1.4rem;
	border-radius:12px;
	gap:1rem;
}
.custom .wtg-links-cards-compact .wtg-links-card-icon img{ width:24px; height:24px; }
.custom .wtg-links-cards-compact .wtg-links-card-title{ font-size:.85rem; font-weight:600; }
.custom .wtg-links-cards-compact .wtg-links-card-subtitle{ font-size:.75rem; margin-top:.15rem; }
.custom .wtg-links-cards-compact .wtg-links-card-button{
	width:30px;
	height:30px;
	font-size:.8rem;
}

@media only screen and (max-width:910px){
	.custom .wtg-links-intro{ flex-basis:100%; }
	.custom .wtg-links-cards{ flex-basis:100%; }
}
@media only screen and (max-width:600px){
	.custom .wtg-links-cards.wtg-links-cards-compact{ grid-template-columns:1fr; }
	.custom .wtg-links-card{ padding:1.25rem 1.5rem; }
}

/* =============================================================================
   BLOCK: Stats bar
   Template: wtg-templates/stats-bar/stats-bar.php
   ============================================================================= */
.custom .wtg-stats-container.wtg-stats-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-stats-container.wtg-stats-bg-blue{ background:var(--custom-blue, #daebf8); }

.custom .wtg-stats-row{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.custom .wtg-stat-item{
	flex:1 1 0;
	min-width:0;
	text-align:center;
	padding:0 2rem;
	box-sizing:border-box;
}
/* Vertical divider between items (not before the first, not after the
   last) — a real border rather than a separate element, so it always sits
   exactly between two items regardless of how many there are. */
.custom .wtg-stat-item:not(:first-child){
	border-left:1px solid var(--wtg-border);
}

.custom .wtg-stat-number{
	font-size:2rem;
	font-weight:600;
	line-height:1.2;
	color:#000;
	margin:0 0 .25rem;
}
.custom .wtg-stat-label{
	font-size:var(--wtg-text-base);
	color:black;
	margin:0;
}

@media only screen and (max-width:700px){
	/* Stacked column instead of a row — a vertical divider stops making
	   sense once items aren't side by side, so it switches to a horizontal
	   line above each item (except the first) instead. */
	.custom .wtg-stats-row{ flex-direction:column; }
	.custom .wtg-stat-item{
		width:100%;
		padding:1.5rem 0;
		border-left:none !important;
		border-top:1px solid var(--wtg-border);
	}
	.custom .wtg-stat-item:first-child{ border-top:none; padding-top:0; }
	.custom .wtg-stat-item:last-child{ padding-bottom:0; }
}
@media only screen and (max-width:470px){
	.custom .wtg-stat-number{ font-size:1.9rem; }
}

/* =============================================================================
   BLOCK: CTA banner
   Template: wtg-templates/cta-banner/cta-banner.php

   Background lives on ".ps-container" (a rounded panel), not the section
   itself — this deliberately does NOT use the site's ".ps-section.dark"
   utility class for the dark variant (unlike some other WTG blocks), so it
   never triggers that class's z-index:-1 and doesn't need the
   "wtg-block-scope" stacking fix those other blocks rely on.

   h2 / subheading / CTA wrapper are all given width:100% — ".ps-container"
   is display:flex, so without it each is just an unconstrained flex item
   that shrinks to its own content width, and centering (text-align and
   margin:auto alike) has no room to actually do anything.
   ============================================================================= */
.custom .wtg-ctabanner-container{
	margin-top:0;
	margin-bottom:0;
}
.custom .wtg-ctabanner-container.wtg-ctabanner-bg-blue{ background:var(--custom-blue, #daebf8); }
.custom .wtg-ctabanner-container.wtg-ctabanner-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-ctabanner-container.wtg-ctabanner-bg-dark{ background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A)); }

.custom .wtg-ctabanner-container h2{ width:100%; margin-bottom:1.5rem; }
.custom .wtg-ctabanner-subheading{
	width:100%;
	font-size:var(--wtg-text-base);
	line-height:1.6;
	max-width:700px;
	margin:0 auto 2rem;
}
/* No CTA below means the subheading is the last thing in the panel — drop
   the bottom margin so it doesn't leave empty space under it. */
.custom .wtg-ctabanner-subheading:last-child{ margin-bottom:0; }

.custom .wtg-ctabanner-cta{ width:100%; }
.custom .wtg-ctabanner-cta a.inline-link{ font-size:var(--wtg-text-base); }

/* =============================================================================
   BLOCK: Comparison (Without / With)
   Template: wtg-templates/comparison-block.php
   ============================================================================= */
 
/* Defense-in-depth: plain (unprefixed) selectors so the section and container
   center and size correctly even if the site-wide ".custom" ancestor
   selectors don't end up matching in a given page context. */
.wtg-compare-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-compare-intro{ width:100%; margin-bottom:2.5rem; }
.custom .wtg-compare-intro p{ max-width:700px; margin:0 auto; font-size:var(--wtg-text-base); color:black; }
 
/* Mobile-first: a single stacked column is the UNCONDITIONAL DEFAULT — no
   override/media-query reset is needed to get there. The overlapping
   two-column desktop layout is only ever added on top of this below. */
.custom .wtg-compare-grid{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:2rem;
	position:relative;
	z-index:1;
}
 
/* Swap order applies at every breakpoint (flexbox on mobile, grid on
   desktop both honor the `order` property), so the highlighted column
   consistently comes first when requested. */
.custom .wtg-compare-swap .wtg-compare-highlight{ order:-1; }
.custom .wtg-compare-swap .wtg-compare-muted{ order:1; }
 
.custom .wtg-compare-col{
	border-radius:.75rem;
	padding:1.5rem;
	box-sizing:border-box;
}
.custom .wtg-compare-muted{ background-color:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-compare-highlight{ background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A)); }
 
.custom .wtg-compare-content{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
	gap:1.5rem;
}
.custom .wtg-compare-content h3{ font-size:1.3rem; font-weight:600; margin:0; }
.custom .wtg-compare-muted h3{ color:#000; }
.custom .wtg-compare-highlight h3{ color:#fff; }
 
.custom .wtg-compare-list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:1rem;
}
.custom .wtg-compare-list li{
	display:flex;
	align-items:flex-start;
	gap:.6rem;
	font-size:var(--wtg-text-base);
	line-height:1.5rem;
}
.custom .wtg-compare-muted .wtg-compare-list li{ color:#000; }
.custom .wtg-compare-highlight .wtg-compare-list li{ color:#fff; }
 
.custom .wtg-compare-icon{
	flex-shrink:0;
	font-weight:600;
	line-height:1.5rem;
}
.custom .wtg-compare-icon-cross{ color:#000; }
.custom .wtg-compare-icon-check{ color:#fff; }
 
.custom .wtg-compare-cta{ margin-top:.5rem; }
 
/* Visually-hidden helper (namespaced, doesn't depend on the parent theme
   defining .screen-reader-text) so assistive tech gets "Included:" /
   "Not included:" context that sighted users get from color + icon alone. */
.wtg-sr-only{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	white-space:nowrap !important;
	border:0 !important;
}
 
/* Desktop: two-column grid with the highlighted card overlapping slightly
   and lifted with a shadow, matching the reference design. */
@media screen and (min-width:768px){
	.custom .wtg-compare-grid{
		display:grid;
		grid-template-columns:.9fr 1fr;
		align-items:center;
		gap:0;
	}
	.custom .wtg-compare-col{ padding:2rem; }
 
	.custom .wtg-compare-grid .wtg-compare-highlight{
		margin-left:-1rem;
		box-shadow:-20px 0 32px rgb(0 0 0 / .2);
	}
 
	/* Swapped: the highlighted column is now visually first (left), so its
	   overlap and shadow need to point the other way. */
	.custom .wtg-compare-swap .wtg-compare-highlight{
		margin-left:0;
		margin-right:-1rem;
		box-shadow:20px 0 32px rgb(0 0 0 / .2);
	}
}
 
 
/* =============================================================================
   BLOCK: Comparison Table
   Template: wtg-templates/comparison-table.php
   ============================================================================= */
 
/* Defense-in-depth: plain (unprefixed) selectors so the section and container
   center and size correctly even if the site-wide ".custom" ancestor
   selectors don't end up matching in a given page context. */
.wtg-ctable-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-ctable-intro{ width:100%; margin-bottom:2.5rem; }
.custom .wtg-ctable-intro p{ max-width:760px; font-size:var(--wtg-text-base); color:black; }
 
.custom .wtg-ctable{
	--wtg-ctable-accent:#1E33CF;
	width:100%;
	background:#fff;
	border:1px solid var(--wtg-border);
	border-radius:20px;
	overflow:hidden;
	box-sizing:border-box;
}
.custom .wtg-ctable table{
	width:100%;
	border-collapse:collapse;
}
 
/* Table cells run smaller than body copy on purpose — dense comparison data
   reads better compact, headers stay a touch larger for hierarchy. */
.custom .wtg-ctable th,
.custom .wtg-ctable td{
	text-align:left;
	vertical-align:top;
	padding:1rem 1.5rem;
	font-size:.85rem;
	line-height:1.4rem;
}
 
.custom .wtg-ctable thead th{
	font-size:.95rem;
	font-weight:600;
	color:#000;
	border-bottom:1px solid var(--wtg-border);
	padding-bottom:1rem;
}
.custom .wtg-ctable thead th.wtg-ctable-highlight{ color:var(--wtg-ctable-accent); }
.custom .wtg-ctable-subtitle{
	display:block;
	font-size:.8rem;
	font-weight:400;
	color:black;
	margin-top:.15rem;
}

.custom .wtg-ctable tbody tr{ border-top:1px solid var(--wtg-border); }
.custom .wtg-ctable tbody tr:first-child{ border-top:none; }
.custom .wtg-ctable tbody td:first-child{ font-weight:600; color:#000; }
.custom .wtg-ctable tbody td{ color:#000; }
 
.custom .wtg-ctable-cell{ display:flex; align-items:flex-start; gap:.5rem; }
.custom .wtg-ctable-icon{ flex-shrink:0; font-weight:700; line-height:1.4rem; }
.custom .wtg-ctable-icon-check{ color:var(--wtg-ctable-accent); }
.custom .wtg-ctable-icon-cross{ color:#000; }
 
/* Below 700px: collapse the table into stacked, labelled cards. The thead
   is visually hidden (not display:none) so screen readers still announce
   column context; each cell instead prints its own column label via
   data-label + a ::before, right-aligned against the value. */
@media screen and (max-width:700px){
	.custom .wtg-ctable{ border:none; border-radius:0; background:none; }
	.custom .wtg-ctable table,
	.custom .wtg-ctable tbody,
	.custom .wtg-ctable tr,
	.custom .wtg-ctable td{ display:block; width:100%; }
 
	.custom .wtg-ctable thead{
		position:absolute !important;
		width:1px !important;
		height:1px !important;
		padding:0 !important;
		margin:-1px !important;
		overflow:hidden !important;
		clip:rect(0,0,0,0) !important;
		white-space:nowrap !important;
		border:0 !important;
	}
 
	.custom .wtg-ctable tbody tr{
		border:1px solid var(--wtg-border);
		border-radius:14px;
		background:#fff;
		margin-bottom:1rem;
		padding:0 1.2rem;
	}
	.custom .wtg-ctable tbody tr:last-child{ margin-bottom:0; }
 
	.custom .wtg-ctable td{
		border-top:1px solid var(--wtg-border);
		padding:.9rem 0;
	}
	.custom .wtg-ctable td:first-child{ border-top:none; font-size:.95rem; }
 
	.custom .wtg-ctable td:not(:first-child){
		display:flex;
		align-items:flex-start;
		justify-content:space-between;
		gap:1rem;
	}
	.custom .wtg-ctable td:not(:first-child):before{
		content:attr(data-label);
		flex-shrink:0;
		font-weight:600;
		color:#000;
		max-width:40%;
	}
	.custom .wtg-ctable td:not(:first-child) .wtg-ctable-cell{
		flex-direction:row-reverse;
		text-align:right;
	}
}



/* =============================================================================
   BLOCK: Sliding logos
   Template: wtg-templates/sliding-logos/sliding-logos.php
   ============================================================================= */

.custom .wtg-logos-section{
	overflow:hidden;
	padding:2.5rem 0;
}
.custom .wtg-logos-section.wtg-logos-bg-white{ background:#fff; }
.custom .wtg-logos-section.wtg-logos-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-logos-section.wtg-logos-bg-transparent{ background:transparent; }

/* Defense-in-depth: these are plain (unprefixed) selectors so the block
   lays out correctly even in contexts where the site-wide ".custom" ancestor
   selectors above don't end up matching (e.g. unexpected DOM wrapping). */
.wtg-logos-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-logos-inner{
	box-sizing:border-box;
}

.custom .wtg-logos-inner{
	width:100%;
	max-width:1600px;
	margin:0 auto;
}

.custom .wtg-logos-eyebrow{
	text-align:center;
	font-size:.85rem;
	font-weight:500;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:#9b9b9b;
	margin-bottom:1.5rem;
}

.custom .wtg-logos-marquee{
	position:relative;
	overflow:hidden;
	width:100%;
	display:flex;
}
.custom .wtg-logos-marquee:before,
.custom .wtg-logos-marquee:after{
	content:"";
	position:absolute;
	top:0;
	width:180px;
	height:100%;
	z-index:2;
	pointer-events:none;
}
.custom .wtg-logos-marquee:before{ left:0; background:linear-gradient(to right, var(--wtg-fade-color, #fff), transparent); }
.custom .wtg-logos-marquee:after{ right:0; background:linear-gradient(to left, var(--wtg-fade-color, #fff), transparent); }
.custom .wtg-logos-bg-white .wtg-logos-marquee{ --wtg-fade-color:#fff; }
.custom .wtg-logos-bg-lightgrey .wtg-logos-marquee{ --wtg-fade-color:#f7f7f7; }
.custom .wtg-logos-bg-transparent .wtg-logos-marquee:before,
.custom .wtg-logos-bg-transparent .wtg-logos-marquee:after{ display:none; }

.custom .wtg-logos-track{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	flex-shrink:0;
	min-width:100%;
	animation:wtg-logos-scroll var(--wtg-logo-duration, 45s) linear infinite;
}
.custom .wtg-logos-pause-hover .wtg-logos-marquee:hover .wtg-logos-track,
.custom .wtg-logos-pause-hover .wtg-logos-marquee:focus-within .wtg-logos-track{
	animation-play-state:paused;
}
.custom .wtg-logos-marquee.wtg-logos-offscreen .wtg-logos-track{
	animation-play-state:paused;
}

.custom .wtg-logos-item{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 1.75rem;
	flex-shrink:0;
}
.custom .wtg-logos-item a{ display:flex; }
.custom .wtg-logos-item img{
	height:var(--wtg-logo-h, 30px);
	width:auto;
	max-width:160px;
	object-fit:contain;
}
.custom .wtg-logos-grayscale .wtg-logos-item img{
	filter:grayscale(100%) contrast(45%);
	opacity:.6;
	transition:filter .25s ease, opacity .25s ease;
}
/* Only restores full color on hover when the "Restore color on hover" field is enabled */
.custom .wtg-logos-hover-color .wtg-logos-item:hover img{ filter:none; opacity:1; }

@keyframes wtg-logos-scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
	.custom .wtg-logos-track{ animation:none; }
}
@media screen and (max-width:600px){
	.custom .wtg-logos-item{ margin:0 1.1rem; }
	.custom .wtg-logos-marquee:before,
	.custom .wtg-logos-marquee:after{ width:70px; }
}


/* =============================================================================
   BLOCK: Cards with icon
   Template: wtg-templates/cards-with-icon/cards-with-icon.php
   ============================================================================= */

.custom .wtg-icard-intro,
.custom .wtg-icard-intro h2,
.custom .wtg-icard-intro p{ width:100%; }
.custom .wtg-icard-intro{ margin-bottom:2.5rem; }
.custom .wtg-icard-intro p{ font-size:var(--wtg-text-base); color:black; margin:0 auto; }

/* Defense-in-depth: plain (unprefixed) selectors so the section and its
   container center and size correctly even if the site-wide ".custom"
   ancestor selectors don't end up matching in a given page context. */
.wtg-icards-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-icards-section .ps-container{
	width:100%;
	max-width:1300px;
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
}
.wtg-icard-intro{ width:100%; }

.custom .wtg-icard-grid{
	display:grid;
	gap:1.4rem;
	grid-template-columns:repeat(3, 1fr);
	width:100%;
}
.custom .wtg-icard-grid.wtg-icard-cols-2{ grid-template-columns:repeat(2, 1fr); }
.custom .wtg-icard-grid.wtg-icard-cols-3{ grid-template-columns:repeat(3, 1fr); }
.custom .wtg-icard-grid.wtg-icard-cols-4{ grid-template-columns:repeat(4, 1fr); }

.custom .wtg-icard{
	border-radius:20px;
	padding:2rem;
	transition:transform .5s ease;
}
.custom .wtg-icard:hover{ transform:scale(1.008); }
.custom .wtg-icard h3{ font-size:1.1rem; font-weight:600; margin:1rem 0 .6rem; line-height:1.3; }
.custom .wtg-icard p{ font-size:var(--wtg-text-base); line-height:1.6; margin:0; color:black; }

/* Icon chip background — one unified system, independent of card_style
   (light/dark), controlled by the icon_background field. No filter/invert
   on the <img>: the uploaded icon file's own color is used as-is, so pick
   an icon whose color already reads clearly against the chosen chip
   background (e.g. a white icon graphic for the "dark" chip). */
.custom .wtg-icard-icon{
	width:56px;
	height:56px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:.4rem;
}
.custom .wtg-icard-icon img{ width:26px; height:26px; }

.custom .wtg-icon-bg-dark .wtg-icard-icon{ background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A)); }
.custom .wtg-icon-bg-lightgrey .wtg-icard-icon{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-icon-bg-blue .wtg-icard-icon{ background:var(--custom-blue, #daebf8); }
.custom .wtg-icon-bg-transparent .wtg-icard-icon{
	background:none;
	width:26px;
	height:26px;
}

/* Light variant (white card) */
.custom .wtg-icard-style-light .wtg-icard{ background:#fff; border:1px solid var(--wtg-border); }
.custom .wtg-icard-style-light h3{ color:#000; }

/* Paragraph text color is a user choice on the light variant (dark variant always stays white for contrast) */
.custom .wtg-icard-style-light.wtg-icard-text-black .wtg-icard p{ color:#000; }
.custom .wtg-icard-style-light.wtg-icard-text-grey .wtg-icard p{ color:black; }

/* Dark variant (gradient card, white text) */
.custom .wtg-icard-style-dark .wtg-icard{ background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A)); border:1px solid rgb(255 255 255 / .5); }
.custom .wtg-icard-style-dark h3,
.custom .wtg-icard-style-dark p{ color:#fff; }

@media only screen and (max-width:1060px){
	.custom .wtg-icard-grid.wtg-icard-cols-3,
	.custom .wtg-icard-grid.wtg-icard-cols-4{ grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width:600px){
	.custom .wtg-icard-grid{ grid-template-columns:1fr !important; }
}


/* =============================================================================
   BLOCK: Highlight cards
   Template: wtg-templates/highlight-cards/highlight-cards.php

   "Dark" style now means the whole section, not just the cards: the PHP
   template adds the site's own ".dark" utility class to the section when
   card_style is dark, which also makes the site's own ".ps-section.dark h2"
   / "...p" rule turn the heading/subheading white automatically — the
   explicit override below just makes that intentional and independent of
   stylesheet load order, rather than relying on it silently.

   Grid defaults to 3 columns (matching the source page's 3-per-row
   layout) and drops to 2 columns ONLY when there are exactly 2 or exactly
   4 cards (a clean single row or 2x2, rather than an awkward 3-column grid
   with a lopsided last row) — set in PHP via the "wtg-hlcards-cols-2"
   modifier class. Collapses to 2 columns at 1060px and 1 column at 600px
   regardless of card count, matching the same two breakpoints already used
   by ".wtg-icard-grid" (cards-with-icon.php) for consistency.
   ============================================================================= */
.custom .wtg-hlcards-intro{ width:100%; margin-bottom:2.5rem; }
.custom .wtg-hlcards-intro p{ font-size:var(--wtg-text-base); color:black; margin:0 auto; }

/* Dark section variant: explicit + fully qualified so it wins regardless of
   stylesheet order, rather than depending on the site's own same-specificity
   ".ps-section.dark h2/p{color:#fff}" rule to happen to load first. */
.custom .wtg-hlcards-section.dark .wtg-hlcards-intro h2,
.custom .wtg-hlcards-section.dark .wtg-hlcards-intro p{ color:#fff; }

.custom .wtg-hlcards-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1rem;
}
.custom .wtg-hlcards-grid.wtg-hlcards-cols-2{
	grid-template-columns:repeat(2, 1fr);
}
.custom .wtg-hlcard{
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
	border-radius:15px;
	padding:1.5rem;
	transition:transform .5s ease;
}
.custom .wtg-hlcard:hover{ transform:scale(1.008); }
.custom .wtg-hlcard-icon{
	width:fit-content;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-bottom:.5rem;
}
.custom .wtg-hlcard-icon img{ width:auto; height:30px; }
.custom .wtg-hlcard h3{
	font-weight:600;
	font-size:1rem;
	margin:1rem 0 .5rem;
	width:100%;
}
/* No icon uploaded on a given card means the heading is the first thing in
   it — drop the top margin in that case so it doesn't leave a floating gap
   above the heading; ":first-child" naturally only matches this when the
   icon <div> isn't there to be the actual first child instead. */
.custom .wtg-hlcard h3:first-child{ margin-top:0; }
.custom .wtg-hlcard-text{ width:100%; }
.custom .wtg-hlcard-text p{ font-size:var(--wtg-text-base); margin:0; }

/* Dark style: cards keep their own purple/blue gradient — matching the
   source page (and ".ps-container.transparent" elsewhere on the site) —
   regardless of the section now also being dark, so the cards still stand
   out a shade lighter against the section's navy background, same as the
   original design. Kept as its own literal gradient rather than reusing
   --custom-bg-dark, since that's a different, darker gradient meant for
   full sections, not individual cards. */
.custom .wtg-hlcards-style-dark .wtg-hlcard{
	background:linear-gradient(45deg, #454D9D, #2B326F);
	border:1px solid rgb(255 255 255 / .5);
}
.custom .wtg-hlcards-style-dark .wtg-hlcard h3,
.custom .wtg-hlcards-style-dark .wtg-hlcard-text p{ color:#fff; }

/* Light style: no background at all (transparent, sits directly on the
   page/section background), plain black text. A subtle border is kept for
   card definition even though nothing else about "light" was specified —
   without any fill AND without a border the card would have no visible
   edge at all. */
.custom .wtg-hlcards-style-light .wtg-hlcard{
	background:none;
	border:1px solid var(--wtg-border);
}
.custom .wtg-hlcards-style-light .wtg-hlcard h3,
.custom .wtg-hlcards-style-light .wtg-hlcard-text p{ color:#000; }

@media only screen and (max-width:1060px){
	.custom .wtg-hlcards-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width:600px){
	/* !important guarantees single-column here regardless of the
	   ".wtg-hlcards-cols-2" modifier's own higher specificity — same
	   technique ".wtg-icard-grid" already uses for the same reason. */
	.custom .wtg-hlcards-grid{ grid-template-columns:1fr !important; }
}


/* =============================================================================
   BLOCK: Colored text block with CTA
   Template: wtg-templates/colored-text-block-with-cta/colored-text-block-with-cta.php
   ============================================================================= */

/* Color lives on the .ps-container itself (a rounded colored "panel"),
   matching the site's existing .ps-container.transparent pattern — NOT on
   the full-bleed .ps-section. */
.custom .wtg-ctb-container.wtg-ctb-bg-blue{ background:var(--custom-blue, #daebf8); }
.custom .wtg-ctb-container.wtg-ctb-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-ctb-container.wtg-ctb-bg-dark{ background:var(--custom-bg-dark, linear-gradient(45deg, #19248B, #090F4A)); }

/* Fallback in case the .custom ancestor selectors above don't match for any
   reason — same colors, applied via a plain (unprefixed) selector. */
.wtg-ctb-container.wtg-ctb-bg-blue{ background:#daebf8; }
.wtg-ctb-container.wtg-ctb-bg-lightgrey{ background:#f7f7f7; }
.wtg-ctb-container.wtg-ctb-bg-dark{ background:linear-gradient(45deg, #19248B, #090F4A); }

/* Dark variant: white body copy (including list items). Body-copy links
   don't need a color override here — the PHP template (see
   wtg_add_link_class() in colored-text-block-with-cta.php) already switches
   them to ".inline-link.white" specifically when this "dark" background is
   selected, and to plain ".inline-link" (black) on the blue/lightgrey
   variants, so the right contrast is picked per background automatically. */
.custom .wtg-ctb-bg-dark .wtg-ctb-text,
.custom .wtg-ctb-bg-dark .wtg-ctb-text h2,
.custom .wtg-ctb-bg-dark .wtg-ctb-body,
.custom .wtg-ctb-bg-dark .wtg-ctb-body p,
.custom .wtg-ctb-bg-dark .wtg-ctb-body li,
.custom .wtg-ctb-bg-dark .wtg-ctb-body ul,
.custom .wtg-ctb-bg-dark .wtg-ctb-body ol{ color:#fff !important; }

/* The standalone CTA (cta_style field) is separate from the body copy
   above. When an editor picks the plain "inline-link" CTA style on the dark
   background, switch it to the same lighter periwinkle used elsewhere on
   dark panels so it stays readable — the CTA's black/white BUTTON styles
   already contrast correctly on their own and are untouched by this. */
.custom .wtg-ctb-bg-dark .wtg-ctb-cta a.inline-link{
	color:#d6dbfd !important;
	background-image:linear-gradient(to right, #d6dbfd 50%, rgba(214,219,253,.55) 50%) !important;
}
.custom .wtg-ctb-bg-dark .wtg-ctb-cta a.inline-link:hover{ color:#e5eaff !important; }

/* Defense-in-depth: plain (unprefixed) selectors so the section and
   container center and size correctly even if the site-wide ".custom"
   ancestor selectors don't end up matching in a given page context.
   Mobile-first: stacked/column is the unconditional default here too. */
.wtg-ctb-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	box-sizing:border-box;
}
.wtg-ctb-container{
	width:100%;
	max-width:1300px;
	box-sizing:border-box;
	border-radius:30px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-direction:column;
	gap:2.5rem;
}
@media screen and (min-width:1025px){
	.wtg-ctb-container{ flex-direction:row; gap:4rem; }
}

/* Mobile-first layout: stacked in a single column, text then image, is the
   UNCONDITIONAL DEFAULT — no override/media-query reset is needed to get
   there, which removes the failure mode where a narrow-width override
   didn't win and the columns stayed side by side. The side-by-side desktop
   layout is only ever added on top of this via the min-width query below. */
.custom .wtg-ctb-container{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:2.5rem;
}
.custom .wtg-ctb-text,
.custom .wtg-ctb-image{
	width:100%;
}
.custom .wtg-ctb-image{ display:flex; align-items:center; justify-content:center; }
.custom .wtg-ctb-image img{ width:100%; height:auto; border-radius:20px; object-fit:cover; display:block; }

.custom .wtg-ctb-body p{ font-size:var(--wtg-text-base); line-height:1.6rem; margin-bottom:1rem; }
.custom .wtg-ctb-body p:last-child{ margin-bottom:0; }
.custom .wtg-ctb-cta{ margin-top:1.5rem; }

/* CTA button/slide/inline-link and any inline link inside the body copy
   share the same harmonized size as the body text. No Kalium hover-pseudo
   neutralizing needed here: ".custom .cta:after" and ".custom .inline-link
   :after" already suppress it site-wide for both classes this block uses. */
.custom .wtg-ctb-cta a{ font-size:var(--wtg-text-base); }
.custom .wtg-ctb-body a.inline-link{ font-size:var(--wtg-text-base); }

/* Side-by-side desktop layout — only switches on above 1024px, on top of
   the stacked mobile-first default above. Text always renders before the
   image in the markup, so "image-left" only changes the *visual* order via
   row-reverse here; below this breakpoint that reversal never applies, so
   the image is always below the text regardless of which side it was set
   to display on. */
@media screen and (min-width:1025px){
	.custom .wtg-ctb-container{
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		gap:4rem;
	}
	.custom .wtg-ctb-container.wtg-ctb-image-left{ flex-direction:row-reverse; }

	/* flex-basis + min-width (instead of fixed 55/45% widths) so the text
	   column stops shrinking below a readable size before it would wrap. */
	.custom .wtg-ctb-text{ width:auto; flex:1 1 420px; min-width:320px; }
	.custom .wtg-ctb-image{ width:auto; flex:1 1 380px; min-width:280px; }
}

/* =============================================================================
   BLOCK: Band divider
   Template: wtg-templates/band-white/band-white.php
   ============================================================================= */
.wtg-block-scope{ display:contents; }
.wtg-band-white-section{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:center;
	position:relative;
	overflow:visible;
	box-sizing:border-box;
}
/* SPECIFICITY NOTE (this is what made the "inverted" band unreliable):
   this section always also carries the site's own ".ps-section" class,
   which comes with its own ".custom .ps-section{ z-index:1; position:
   relative; ... }" default (specificity 0,2,0). A bare, single-class
   ".wtg-band-white-section{ z-index:5 }" rule (0,1,0) LOSES that fight, so
   the band was silently stuck at the same z-index:1 as any ordinary
   section next to it — a tie that's then resolved by DOM order (later
   element wins). A band placed AFTER a dark section (the common,
   non-inverted case) happened to still win that tie and looked fine; an
   inverted band placed BEFORE the next section it caps loses the tie to
   that later section and gets painted over — which is exactly the bug.
   Chaining this as ".custom.wtg-block-scope .wtg-band-white-section"
   (0,3,0) guarantees it wins regardless of orientation or DOM order. */
.custom.wtg-block-scope .wtg-band-white-section{
	z-index:5;
}
/* Self-sufficient — does not require the .custom ancestor to render. */
.wtg-band-white-section .band-white{
	position:absolute;
	border-radius:30px 30px 0 0;
	background-color:#fff;
	z-index:99;
	width:100%;
	height:50px;
	bottom:-2px !important;
}
.wtg-band-white-section .band-white.inverted{
	border-radius:0 0 30px 30px;
	bottom:auto;
	top:-2px !important;
}

/* Editor-only hint (see the $is_preview note in band-white.php) — never
   printed on the front end, so no front-end override/reset is needed here.
   Deliberately plain, in-flow content so the block always has real
   clickable height inside the Gutenberg canvas. */
.wtg-band-white-editor-hint{
	position:relative;
	z-index:1;
	width:100%;
	margin:0;
	padding:1.1rem 1rem;
	border:1px dashed rgba(0,0,0,.25);
	border-radius:8px;
	background:rgba(0,0,0,.03);
	color:#5c5c5c;
	font-size:.8rem;
	text-align:center;
	box-sizing:border-box;
}

/* =============================================================================
   BLOCK: Testimonials carousel
   Template: wtg-templates/testimonials-carousel/testimonials-carousel.php

   Verbatim port of the Teleport page's testimonials treatment (dark navy
   gradient, glass "stage" card, oversized quote mark, avatar footer, nav
   arrows) — minus the "See all questions"-style CTA (n/a here) and with
   layout bugs fixed (see notes below).

   SPECIFICITY NOTE: this block renders inside a <div class="custom"> that
   the PHP template adds. That means the site's own rules like
   ".custom .ps-container{ margin:0 1.5rem; padding:4rem 3.5rem;
   background:none; ... }" (specificity 0,2,0) are now genuinely in play —
   and a single-class override like ".wtg-testimonials__stage{...}"
   (0,1,0) LOSES to it regardless of source order, silently dropping our
   margin/padding/background. Every rule below is therefore chained as
   ".custom .wtg-testimonials .wtg-target-class" (0,3,0) so it wins
   deterministically, without relying on !important or stylesheet order.
   ============================================================================= */

/* position:relative + z-index:1 for this ".ps-section.dark" instance is
   already handled by the GLOBAL stacking-order rule near the top of this
   file (scoped to ".custom.wtg-block-scope .ps-section.dark", which this
   section matches), so it isn't repeated here. */
.custom .wtg-testimonials{
	--wtg-tst-navy-1:#141d80;
	--wtg-tst-navy-2:#0c1255;
	--wtg-tst-navy-3:#080d40;
	--wtg-tst-accent:#9ec5e3;
	background:linear-gradient(140deg, var(--wtg-tst-navy-1) 0%, var(--wtg-tst-navy-2) 55%, var(--wtg-tst-navy-3) 100%);
}

/* ── Head (heading/subheading) ─────────────────────────────────────────── */
.custom .wtg-testimonials .wtg-testimonials__head{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;      /* centers the text-center child within the flex row */
	margin-top:6rem;             /* generous clearance when a band-white sits directly above */
	padding-top:1rem;
	padding-bottom:1rem;
}
/* Heading stays white — no font-size/font-weight/line-height added here,
   those are left entirely to the site's own .custom h2 rule. */
.custom .wtg-testimonials .wtg-testimonials__head h2{ color:#fff; }
.custom .wtg-testimonials .wtg-testimonials__head p{ color:white; font-size:var(--wtg-text-base); margin:0 auto; }

/* ── Stage (the glass quote card) ──────────────────────────────────────── */
.custom .wtg-testimonials .wtg-testimonials__stage{
	display:flex;
	flex-wrap:wrap;
	position:relative;
	overflow:visible;            /* site's .ps-container default is overflow:hidden — would
	                                 clip the story link / nav if it ever sits near an edge */
	z-index:2;
	max-width:1040px;
	margin-top:1rem;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:7rem;          /* generous clearance when a band-white sits directly below */
	padding:3rem 3.4rem;
	border-radius:30px;
	background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
	border:1px solid rgba(255,255,255,.18);
	text-align:left;
}

.custom .wtg-testimonials .wtg-testimonial{ display:none; width:100%; }
.custom .wtg-testimonials .wtg-testimonial.active{ display:block; animation:wtg-testimonial-fade .35s ease; }
@keyframes wtg-testimonial-fade{
	from{ opacity:0; transform:translateY(8px); }
	to{ opacity:1; transform:none; }
}

.custom .wtg-testimonials .wtg-quote__mark{
	font-family:Georgia, serif;
	font-size:5rem;
	line-height:.6;
	color:var(--wtg-tst-accent);
	opacity:.55;
	margin-bottom:.4rem;
	height:2.2rem;
}
.custom .wtg-testimonials .wtg-quote__text p{ color:#fff; line-height:1.6; font-weight:400; margin:0; font-size:var(--wtg-text-base); }

/* ── Footer: avatar + name/job on the left, "read story" on the right ───── */
.custom .wtg-testimonials .wtg-quote__foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin-top:2rem;
	flex-wrap:wrap;
}
.custom .wtg-testimonials .wtg-quote__id{ display:flex; align-items:center; margin:0; width:auto; }

/* !important here specifically to out-rank a theme-level "img{height:auto}"
   reset (common in WP themes to prevent layout shift), which is what was
   turning the avatar oval instead of a clean circle. */
.custom .wtg-testimonials .wtg-quote__id img{
	width:58px !important;
	height:58px !important;
	border-radius:50% !important;
	object-fit:cover !important;
	margin-right:1rem;
	border:2px solid rgba(255,255,255,.25);
	flex-shrink:0;
}
.custom .wtg-testimonials .wtg-quote__person{ display:flex; flex-direction:column; justify-content:center; }
.custom .wtg-testimonials .wtg-quote__name{ color:#fff; font-weight:600; margin:0; font-size:var(--wtg-text-base); line-height:normal; }
.custom .wtg-testimonials .wtg-quote__job{ color:rgba(255,255,255,.65); margin:0; font-size:.85rem; line-height:normal; }

/* margin-left:auto is the important part: with justify-content:space-between
   a lone wrapped item (e.g. on narrow screens, when the avatar block and
   story link no longer fit on one line) collapses to flex-start — i.e. the
   LEFT — which is what caused the story button to show up on the wrong
   side. margin-left:auto keeps it pinned right in every case, wrapped or
   not, with or without an avatar block present. */
.custom .wtg-testimonials .wtg-quote__story{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	color:#fff !important;
	font-size:var(--wtg-text-base);
	font-weight:500;
	text-decoration:none;
	padding:.6rem 1.2rem;
	border:1px solid rgba(255,255,255,.4);
	border-radius:8px;
	transition:background .2s ease, gap .2s ease;
	margin-left:auto;
}
.custom .wtg-testimonials .wtg-quote__story:hover{ background:rgba(255,255,255,.14); gap:.7rem; }

/* ── Nav: normal in-flow row below the card, NOT absolutely positioned ──
   The previous absolute positioning is what made the arrows unclickable
   (they inherited an unreliable stacking context once the .custom
   specificity fight was resolved) and what caused them to overlap the
   quote text on small screens. As plain flow content below the card,
   both problems go away — the buttons always have their own space and are
   always on top of the paint order for their own row. */
.custom .wtg-testimonials .wtg-quote__nav{
	width:100%;
	display:flex;
	justify-content:center;
	gap:1rem;
	margin-top:2rem;
	position:relative;
	z-index:2;
}
.custom .wtg-testimonials .wtg-quote__arrow{
	width:40px;
	height:40px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.35);
	background:rgba(255,255,255,.06);
	color:#fff;
	font-size:15px;
	cursor:pointer;
	transition:background .2s ease;
	padding:0;
	line-height:1;
	pointer-events:auto;
}
.custom .wtg-testimonials .wtg-quote__arrow:hover{ background:rgba(255,255,255,.18); }

@media (max-width:768px){
	.custom .wtg-testimonials .wtg-testimonials__stage{
		padding-left:1.5rem;
		padding-right:1.5rem;
		margin-left:.5rem;
		margin-right:.5rem;
	}
}
@media (max-width:600px){
	.custom .wtg-testimonials .wtg-testimonials__head{ margin-top:4rem; }
	.custom .wtg-testimonials .wtg-testimonials__stage{
		padding:2.2rem 1.4rem;
		margin-bottom:5rem;
		margin-left:.5rem;
		margin-right:.5rem;
	}
	/* No font-size override needed here anymore — the base rule above
	   already matches this block's harmonized --wtg-text-base. */
	.custom .wtg-testimonials .wtg-quote__foot{ justify-content:flex-start; }
	.custom .wtg-testimonials .wtg-quote__story{ margin-left:0; width:100%; justify-content:center; }
}


/* =============================================================================
   BLOCK: FAQ accordion
   Template: wtg-templates/faq-accordion/faq-accordion.php

   Verbatim port of the Teleport page's FAQ section (rounded panel, 1/3
   heading column + 2/3 accordion column, icon-swap plus/minus toggle) —
   minus the "See all questions" CTA. Container background is now a user
   choice between the site's --custom-lightgrey and --custom-blue tokens.

   Same specificity note as the testimonials block above: every rule is
   chained as ".custom .wtg-faq-section .wtg-target-class" (0,3,0) so it
   reliably wins over the site's ".custom .ps-container" (0,2,0) rules
   regardless of stylesheet order.
   ============================================================================= */

.custom .wtg-faq-section .wtg-faq__container{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:2.5rem;
}
.custom .wtg-faq-section .wtg-faq__container.wtg-faq__container--lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-faq-section .wtg-faq__container.wtg-faq__container--blue{ background:var(--custom-blue, #daebf8); }

.custom .wtg-faq-section .wtg-faq__intro{ width:calc((100% / 3) - 1.25rem); }
/* No font-size/font-weight/line-height added on this h2 — left entirely
   to the site's own .custom h2 rule. */
.custom .wtg-faq-section .wtg-faq__intro h2{ margin:0; }

.custom .wtg-faq-section .wtg-faq__wrapper{
	display:flex;
	flex-direction:column;
	gap:30px;
	width:calc((200% / 3) - 1.25rem);
}

.custom .wtg-faq-section .wtg-faq__item{ width:100%; }

.custom .wtg-faq-section .wtg-faq__header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
	gap:15px;
}
.custom .wtg-faq-section .wtg-faq__header h3{
	color:#000;
	margin:0;
	/* Intentionally larger than --wtg-text-base: this is the clickable
	   question heading (h3), not body copy, so it stays out of the
	   paragraph font-size harmonization applied elsewhere in this file. */
	font-size:1.05rem;
	transition:color 200ms ease-in-out;
	margin-right:15px;
}
.custom .wtg-faq-section .wtg-faq__header:hover h3{ color:darkgray; }
.custom .wtg-faq-section .wtg-faq__header:hover .wtg-faq__toggle{ opacity:.6; }

.custom .wtg-faq-section .wtg-faq__toggle{
	cursor:pointer;
	transition:opacity 150ms ease-in-out;
	margin-top:0 !important;
	flex-shrink:0;
}

.custom .wtg-faq-section .wtg-faq__content{
	height:0;
	overflow:hidden;
	transition:height 300ms ease;
	color:#000;
}
.custom .wtg-faq-section .wtg-faq__answer{ padding-top:25px; }
.custom .wtg-faq-section .wtg-faq__answer p{ margin:0 0 1rem; font-size:var(--wtg-text-base); line-height:1.6; }
.custom .wtg-faq-section .wtg-faq__answer p:last-child{ margin-bottom:0; }

/* Links typed into an answer are upgraded to the real ".inline-link" class
   from PHP (see wtg_add_link_class() in faq-accordion.php) — this rule only
   "forces" the size so it always matches the harmonized answer copy above,
   regardless of which element the link happens to sit inside. No Kalium
   hover-pseudo neutralizing needed here: ".custom .inline-link:after"
   already handles that site-wide once the class is present. */
.custom .wtg-faq-section .wtg-faq__answer a.inline-link{ font-size:var(--wtg-text-base); }

.custom .wtg-faq-section .wtg-faq__divider{
	height:1px;
	background-color:lightgrey;
	border:none;
	border-radius:5px;
	margin-top:30px;
}

@media only screen and (max-width:850px){
	.custom .wtg-faq-section .wtg-faq__intro,
	.custom .wtg-faq-section .wtg-faq__wrapper{ width:100%; }
}

/* ==========================================================================
   BLOCK: HERO
   Template: wtg-templates/hero.php
   ========================================================================== */
.custom .wtg-hero-container {
	background-size: cover;
	background-position: center;
	background-color: #0d1442;
}
.custom .wtg-hero-container.wtg-hero-fallback-bg {
	background-image: var(--custom-bg-dark);
}
.custom .wtg-hero-content {
	max-width: 100%;
}
.custom .wtg-hero-content p {
	font-size: var(--wtg-text-base);
}

/* Editor-only hint (see the $is_preview note in hero.php) — never printed
   on the front end. Deliberately self-contained (own background/border/
   text color) rather than inheriting .text-white / .wtg-hero-text-black,
   so it stays legible no matter which text color or background the editor
   has picked before filling in any real content. */
.custom .wtg-hero-content .wtg-hero-editor-hint {
	color: #3a3a3a !important;
	background: rgba(255, 255, 255, .85);
	border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: 8px;
	padding: 1.1rem 1rem;
	font-size: .8rem;
	text-align: center;
	width: 100%;
}
@media only screen and (min-width: 911px) {
	.custom .wtg-hero-content {
		max-width: 60%;
	}
}
 
/* Text color choice (hero_text_color field). Default is white (.text-white,
   defined site-wide). This never touches .cta buttons — those keep their
   own black/white styling from the button_style field regardless. */
.custom .wtg-hero-text-black,
.custom .wtg-hero-text-black h1,
.custom .wtg-hero-text-black p {
	color: #000;
}
 
.custom .wtg-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 2.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / .22);
}
.custom .wtg-hero-text-black .wtg-hero-stats {
	border-top-color: rgb(0 0 0 / .12);
}
.custom .wtg-hero-stat {
	display: flex;
	flex-direction: column;
}
.custom .wtg-hero-stat-num {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}
.custom .wtg-hero-text-black .wtg-hero-stat-num {
	color: #000;
}
.custom .wtg-hero-stat-label {
	font-size: .76rem;
	color: rgb(255 255 255 / .72);
	margin-top: .2rem;
}
.custom .wtg-hero-text-black .wtg-hero-stat-label {
	color: black;
}
@media only screen and (max-width: 600px) {
	.custom .wtg-hero-stats {
		gap: 1.25rem 1.75rem;
	}
}
 
 
/* ==========================================================================
   BLOCK: HERO 2
   Template: wtg-templates/hero-2.php

   Rebuilt as its own self-contained "wtg-hero2-*" class set rather than
   reusing the site's ".product-hero-*" pattern directly — see the note at
   the top of hero-2.php for why (that shared class alone sets no image
   height, so every page using it also layers its own page-specific
   overrides on top; this bakes the complete, working result into one
   place instead of depending on that split).

   IMAGE HEIGHT: height is calc(100% + 2 * |top|) at every breakpoint —
   shifting the image up by "top" and growing its height by twice that
   makes it overflow the container by the same amount on the bottom edge
   too, so the crop stays symmetric around the container regardless of
   which breakpoint's offset is active (rather than an arbitrary percentage
   that only happened to look right at one size).
   ========================================================================== */
.custom .wtg-hero2-section{ padding:4rem 0; }
.custom .wtg-hero2-container{
	z-index:0;
	display:flex;
	justify-content:space-between;
	align-content:center;
	flex-wrap:wrap;
	overflow:visible;
}
.custom .wtg-hero2-container.wtg-hero2-bg-blue{ background:var(--custom-blue, #daebf8); }
.custom .wtg-hero2-container.wtg-hero2-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }

.custom .wtg-hero2-container h1{ margin:.5rem 0 2rem; font-size:2.2rem; width:100%; }

.custom .wtg-hero2-content{ max-width:60%; z-index:99; }
.custom .wtg-hero2-content p{ font-size:var(--wtg-text-base); }

.custom .wtg-hero2-cta{ margin-top:2rem; }

.custom .wtg-hero2-img{ position:relative; width:30%; overflow:visible; }
.custom .wtg-hero2-img-inner{ position:absolute; top:0; right:0; z-index:99; height:100%; width:100%; }
.custom .wtg-hero2-img-inner img{
	position:absolute;
	right:0;
	border-radius:20px;
	height:calc(100% + 13rem); /* top:-6.5rem below → 2 * 6.5rem */
	max-width:100%;
	object-fit:cover;
	object-position:5% 0%;
	top:-6.5rem;
	z-index:99;
}

@media only screen and (max-width:1200px){
	.custom .wtg-hero2-img-inner img{ height:calc(100% + 10rem); top:-5rem; }
}
@media only screen and (max-width:995px){
	.custom .wtg-hero2-img-inner img{ top:-6rem; height:calc(100% + 12rem); }
}
@media only screen and (max-width:910px){
	.custom .wtg-hero2-content{ max-width:100%; }
	.custom .wtg-hero2-img{ display:none; }
	.custom .wtg-hero2-section{ padding-top:0; }
}


/* ==========================================================================
   BLOCK: CASE HIGHLIGHTS
   Template: wtg-templates/case-highlights.php
   ========================================================================== */
.custom .wtg-cases-title {
	width: 100%;
}
/* No margin-bottom override here — falls back to the site's own default
   ".custom h2{ margin-bottom:2rem }" instead of the tighter .5rem this
   used to force. */
.custom .wtg-cases-title p {
	font-size: var(--wtg-text-base);
	color: black;
	margin-bottom: 2.25rem;
}
 
/* Base grid + column-count variants. The template picks the class that
   matches how many cases actually have content (1–3 get an exact match,
   4+ caps at 4 columns), so there's never an awkward empty gap. */
.custom .wtg-cases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 1rem;
	width: 100%;
}
.custom .wtg-cases.wtg-cases-cols-1 { grid-template-columns: 1fr; }
.custom .wtg-cases.wtg-cases-cols-2 { grid-template-columns: repeat(2, 1fr); }
.custom .wtg-cases.wtg-cases-cols-3 { grid-template-columns: repeat(3, 1fr); }
.custom .wtg-cases.wtg-cases-cols-4 { grid-template-columns: repeat(4, 1fr); }
 
.custom .wtg-case {
	border: 1px solid var(--wtg-border);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: transform .5s ease;
}
/* The card itself isn't a link (only ".wtg-case-link" inside it is) — a
   subtle hover "grow" just signals there's something clickable within. */
.custom .wtg-case:hover { transform: scale(1.008); }
.custom .wtg-case-img {
	position: relative;
	height: 190px;
	overflow: hidden;
}
.custom .wtg-case-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.custom .wtg-case-tag {
	position: absolute;
	left: .9rem;
	top: .9rem;
	background: #fff;
	color: #000;
	font-size: .78rem;
	font-weight: 400;
	padding: .35em .85em;
	border-radius: 6px;
}
.custom .wtg-case-body {
	padding: 1.5rem 1.6rem 1.75rem;
}
.custom .wtg-case-body h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: .6rem;
	line-height: 1.3;
	color: #000;
}
.custom .wtg-case-body p {
	font-size: var(--wtg-text-base);
	line-height: 1.55rem;
	color: black;
	margin-bottom: 0;
}
.custom .wtg-case-link {
	display: inline-block;
	margin-top: .9rem;
	font-size: .85rem;
}
.custom .wtg-link-arrow {
	display: inline-block;
	margin-left: .3rem;
	transition: transform .2s ease-in-out;
}
.custom .wtg-case-link:hover .wtg-link-arrow {
	transform: translateX(4px);
}
 
/* 4-column layout gets one intermediate step down to 2 columns before the
   universal 1-column collapse below (same pattern as the icon-card grid). */
@media only screen and (max-width: 1060px) {
	.custom .wtg-cases.wtg-cases-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* !important here because it must beat the higher-specificity
   .wtg-cases-cols-2/3/4 variant rules above, regardless of which one is
   present on a given instance of this block. */
@media only screen and (max-width: 820px) {
	.custom .wtg-cases {
		grid-template-columns: 1fr !important;
	}
}
 
 
/* ==========================================================================
   BLOCK: Case study
   Template: wtg-templates/case-study/case-study.php
   ========================================================================== */
.custom .wtg-case-study-container.wtg-case-study-bg-white{ background:#fff; }
.custom .wtg-case-study-container.wtg-case-study-bg-lightgrey{ background:var(--custom-lightgrey, #f7f7f7); }
.custom .wtg-case-study-container.wtg-case-study-bg-blue{ background:var(--custom-blue, #daebf8); }

.custom .wtg-case-study-top{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:3rem;
	width:100%;
}
.custom .wtg-case-study-image{
	order:1;
	flex:1 1 380px;
	min-width:280px;
}
.custom .wtg-case-study-image img{
	width:100%;
	height:22rem;
	object-fit:cover;
	border-radius:16px;
	display:block;
}
.custom .wtg-case-study-content{
	order:2;
	flex:1 1 380px;
	min-width:280px;
}
/* Image position is a per-instance choice (image_position field) — DOM
   order always keeps the image first (predictable reading/tab order for
   assistive tech); only the visual left/right position changes here. */
.custom .wtg-case-study-top--image-right .wtg-case-study-image{ order:2; }
.custom .wtg-case-study-top--image-right .wtg-case-study-content{ order:1; }
/* No image means the text column is the only thing in the row — let it
   use the full width instead of staying capped at its flex-basis. */
.custom .wtg-case-study-top--no-image .wtg-case-study-content{
	flex-basis:100%;
}

.custom .wtg-case-study-content h2{ margin-bottom:1.5rem; }
.custom .wtg-case-study-description{
	font-size:var(--wtg-text-base);
	line-height:1.6;
	color:black;
	margin-bottom:1.5rem;
}
.custom .wtg-case-study-description p{ margin:0 0 1rem; }
.custom .wtg-case-study-description p:last-child{ margin-bottom:0; }
.custom .wtg-case-study-description strong{ font-weight:700; }
/* Links typed into the description are upgraded to the real ".inline-link"
   class from PHP (see wtg_add_link_class() in case-study.php) — this rule
   only "forces" the size so it always matches the paragraph copy above. */
.custom .wtg-case-study-description a.inline-link{ font-size:var(--wtg-text-base); }

.custom .wtg-case-study-readmore{ margin:0 0 1.5rem; }
.custom .wtg-case-study-readmore a.inline-link{ font-size:var(--wtg-text-base); }

/* Companies: logo-only now (no name label) — each is its own clickable
   logo, sized in a fixed-height box so logos of different aspect ratios
   still line up on the same baseline. */
.custom .wtg-case-study-companies{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1rem;
	margin-bottom:1.25rem;
}
.custom .wtg-case-study-company{
	display:flex;
	align-items:center;
	text-decoration:none;
}
.custom .wtg-case-study-logo-wrap{
	display:flex;
	align-items:center;
	justify-content:center;
	height:28px;
}
.custom .wtg-case-study-logo{ height:28px; width:auto; max-width:120px; object-fit:contain; }
.custom .wtg-case-study-company-plus{
	font-size:1rem;
	color:#9a9a9a;
	line-height:1;
}
/* Grey reads too faint on the blue background — swap to a blue-toned
   accent so it still registers against it. */
.custom .wtg-case-study-bg-blue .wtg-case-study-company-plus{ color:#97a6d2; }

/* Quote: its own full-width row below the image/text split, not squeezed
   into the narrower text column — see the layout note in case-study.php. */
.custom .wtg-case-study-quote{
	display:flex;
	gap:1.25rem;
	align-items:flex-start;
	width:100%;
	margin-top:2.5rem;
	padding-top:2.5rem;
	border-top:1px solid var(--wtg-border);
}
.custom .wtg-case-study-quote-mark{
	flex-shrink:0;
	font-size:3.5rem;
	line-height:.6;
	font-weight:700;
	color:var(--wtg-border);
	font-family:Georgia, "Times New Roman", serif;
}
/* On the blue background, the light grey mark/border read too faint —
   swap both to a blue-toned accent so they still register against it. */
.custom .wtg-case-study-bg-blue .wtg-case-study-quote{ border-top-color:rgb(25 36 139 / .25); }
.custom .wtg-case-study-bg-blue .wtg-case-study-quote-mark{ color:rgb(25 36 139 / .35); }

.custom .wtg-case-study-quote-text{
	font-size:1.2rem;
	font-style:italic;
	line-height:1.5;
	color:#000;
	margin:0 0 1rem;
}
.custom .wtg-case-study-quote-author{ margin:0; font-size:var(--wtg-text-base); }
.custom .wtg-case-study-quote-name{ font-weight:600; color:#000; }
.custom .wtg-case-study-quote-role{ color:black; }
/* The PHP prints these two <span> tags back-to-back with no whitespace
   between them (removing the stray gap that used to render there) — this
   ::before is the only thing providing the ", " separator now. */
.custom .wtg-case-study-quote-name + .wtg-case-study-quote-role:before{ content:", "; }

@media only screen and (max-width:600px){
	.custom .wtg-case-study-image img{ height:14rem; }
	.custom .wtg-case-study-quote{ gap:.75rem; }
	.custom .wtg-case-study-quote-mark{ font-size:2.75rem; }
	.custom .wtg-case-study-quote-text{ font-size:1.05rem; }
}


/* ==========================================================================
   BLOCK: OBJECTIONS / FAQ
   Template: wtg-templates/objections.php
   ========================================================================== */
.custom .wtg-obj-title {
	width: 100%;
}
/* No margin-bottom override here — falls back to the site's own default
   ".custom h2{ margin-bottom:2rem }" instead of the tighter .5rem this
   used to force. */
.custom .wtg-obj-title p {
	font-size: var(--wtg-text-base);
	color: black;
	margin-bottom: 2.25rem;
}
.custom .wtg-objections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3.5rem;
	margin-top: 1rem;
	width: 100%;
}
.custom .wtg-obj {
	padding: 1.6rem 0;
	border-top: 1px solid rgb(0 0 0 / .09);
}
.custom .wtg-obj h3 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: .5rem;
	padding-left: 1rem;
	position: relative;
	color: #000;
}
.custom .wtg-obj h3:before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background: #1E33CF;
}
.custom .wtg-obj-answer {
	padding-left: 1rem;
}
.custom .wtg-obj-answer p {
	font-size: var(--wtg-text-base);
	line-height: 1.55rem;
	color: black;
	margin-bottom: 0;
}
.custom .wtg-obj-answer p + p {
	margin-top: .75rem;
}
.custom .wtg-obj-answer a {
	font-size: var(--wtg-text-base);
	color: black !important;
	background-image: linear-gradient(to right, #000000 50%, lightgrey 50%);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 200% 1px;
	text-decoration: none;
	transition: background-position .2s;
	padding-bottom: 2.5px;
	font-weight: 500;
}
.custom .wtg-obj-answer a:hover {
	background-position: 0 100%;
}
@media only screen and (max-width: 820px) {
	.custom .wtg-objections {
		grid-template-columns: 1fr;
	}
}
 
 
/* ==========================================================================
   BLOCK: CONTACT + HUBSPOT FORM
   Template: wtg-templates/contact.php
   Selectors are scoped under .wtg-contact-section so they only ever affect
   this block, even though the class names underneath (.contact-container,
   .contact-form, .contact-info, etc.) match custom(2).css — that's
   intentional, so this still looks identical to the rest of the site.
   If this section looks unstyled on the live site, it almost always means
   either (a) this file isn't actually enqueued — check enqueue-snippet.php
   is in functions.php, or (b) the copy of this file on the server is stale
   — confirm in DevTools → Network that the loaded template-styles.css
   actually contains "wtg-contact-section".
   ========================================================================== */
.custom .wtg-contact-section .ps-container {
	display: flex;
	flex-wrap: wrap;
	z-index: 1;
	overflow: hidden;
	position: relative;
	width: 100%;
	border-radius: 30px;
	margin: 0 1.5rem;
	padding: 4rem 3.5rem;
	background: none;
	text-align: left;
	max-width: 1300px;
	box-sizing: border-box;
}
.custom .wtg-contact-section .contact-container {
	justify-content: space-between;
}
.custom .wtg-contact-section .contact-form {
	width: 55%;
	box-sizing: border-box;
}
.custom .wtg-contact-section .contact-form h2 {
	/* No font-weight override here — the site's own ".custom h2{ font-weight
	   :500 !important }" always wins regardless, so setting one here would
	   be a no-op. Only the tighter margin actually takes effect. */
	margin-bottom: 1rem;
}
.custom .wtg-contact-section .contact-form p {
	font-size: var(--wtg-text-base);
	margin-bottom: 2rem;
	color: black;
}
.custom .wtg-contact-section .contact-info {
	background: #daebf8;
	padding: 2rem;
	border-radius: 25px;
	height: fit-content;
	width: 35%;
	box-sizing: border-box;
}
.custom .wtg-contact-section .contact-info h4 {
	margin: 0 0 1.5rem;
	font-weight: 600;
}
.custom .wtg-contact-section .contact-info-category {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 1rem 0;
}
.custom .wtg-contact-section .contact-info-category svg {
	height: 24px;
	width: 24px;
	flex-shrink: 0;
	fill: #000;
}
.custom .wtg-contact-section .contact-info-category-text {
	margin-left: 1.5rem;
	max-width: calc(100% - 24px - 1.5rem);
}
.custom .wtg-contact-section .contact-info-category-text h5 {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
}
.custom .wtg-contact-section .contact-info-category-text p {
	margin: 0;
	font-size: .8rem;
}
.custom .wtg-contact-section .hs-form-html {
	min-height: 80px;
}
.custom .wtg-contact-section .hs-fallback-message {
	display: none;
	padding: 20px;
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
	margin-top: 20px;
}
.custom .wtg-contact-section .hs-fallback-message .hs-fallback-title {
	margin-bottom: 10px;
	font-weight: 700;
}
.custom .wtg-contact-section .hs-fallback-message p {
	margin-bottom: 10px;
	font-size: .9rem;
	color: inherit;
}
.custom .wtg-contact-section .hs-fallback-message a {
	color: inherit;
	text-decoration: underline;
}
@media only screen and (max-width: 910px) {
	.custom .wtg-contact-section .contact-form,
	.custom .wtg-contact-section .contact-info {
		width: 100%;
	}
	.custom .wtg-contact-section .contact-container {
		gap: 3rem;
	}
}
@media only screen and (max-width: 768px) {
	.custom .wtg-contact-section .ps-container {
		padding: 2rem 1.5rem;
		margin: 0 .5rem;
	}
}
@media only screen and (max-width: 470px) {
	.custom .wtg-contact-section .ps-container {
		padding: 2rem 1rem;
	}
}

/* =============================================================================
   BLOCK: Steps
   Template: wtg-templates/steps/steps.php
 
   Verbatim port of the Teleport page's "Steerable assets, in three simple
   steps" section: numbered circle + connecting line, text column next to
   an image column. Image side (left/right) and step count are both
   configurable in the block, but the connector-line treatment itself
   (the ::after) is the exact same declaration the source page used for
   every "not last" step — applied here via ":not(:last-child)" so it
   scales automatically to however many steps are added.
 
   Same specificity note as the other blocks: chained as
   ".custom .wtg-steps-section .wtg-target-class" (0,3,0) so it reliably
   wins over the site's ".custom .ps-container" (0,2,0) rules regardless
   of stylesheet order.
   ============================================================================= */
 
/* Only the connector-line color is defined locally here — it's specific to
   this block's numbered-circle treatment rather than a reusable text color
   (the step body copy below now just uses plain black, like the rest of
   this file's body text). */
.custom .wtg-steps-section{
	--wtg-step-line:#e7e9f2;
}
 
.custom .wtg-steps-section .wtg-steps__container{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	height:fit-content;
}
.custom .wtg-steps-section .wtg-steps__text,
.custom .wtg-steps-section .wtg-steps__img{
	width:45%;
}
.custom .wtg-steps-section .wtg-steps__subheading{ margin-bottom:2.5rem; }
.custom .wtg-steps-section .wtg-steps__img{ height:30rem; }
.custom .wtg-steps-section .wtg-steps__img img{
	border-radius:25px;
	object-fit:cover;
	object-position:90% 50%;
	height:100%;
	width:100%;
}
 
/* Image side toggle — desktop only. Mobile always stacks image-above-text
   regardless of this setting (see the max-width:910px block below), same
   as the source page's own responsive behaviour. */
@media (min-width:911px){
	.custom .wtg-steps-section .wtg-steps__container.wtg-steps__container--image-left .wtg-steps__text{ order:2; }
	.custom .wtg-steps-section .wtg-steps__container.wtg-steps__container--image-left .wtg-steps__img{ order:1; }
}
 
.custom .wtg-steps-section .wtg-steps__list{ list-style:none; margin:0; padding:0; position:relative; }
.custom .wtg-steps-section .wtg-steps__list .wtg-step{ display:flex; gap:1.3rem; padding:0 0 1rem; position:relative; }
 
/* The connector line — identical values to the source page's ::after,
   applied to every step except the last one, for any number of steps. */
.custom .wtg-steps-section .wtg-steps__list .wtg-step:not(:last-child):after{
	content:"";
	position:absolute;
	left:21px;
	top:46px;
	bottom:6px;
	width:2px;
	background:linear-gradient(var(--wtg-step-line), transparent);
}
 
.custom .wtg-steps-section .wtg-steps__list .wtg-step__num{
	flex:0 0 auto;
	width:44px;
	height:44px;
	border-radius:50%;
	background:#fff;
	border:1.5px solid var(--wtg-step-line);
	color:rgb(25, 30, 98);
	font-weight:600;
	font-size:1rem;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1;
}
.custom .wtg-steps-section .wtg-steps__list .wtg-step__body h3{
	font-size:1.1rem;
	margin:.4rem 0 .4rem;
}
.custom .wtg-steps-section .wtg-steps__list .wtg-step__body p{
	font-size:var(--wtg-text-base);
	line-height:1.6;
	color:black;
	margin:0;
}
/* The description is now a WYSIWYG field (see the ACF field note in
   steps.php) and can contain more than one <p>, so give inner paragraphs
   after the first a little breathing room instead of running together. */
.custom .wtg-steps-section .wtg-steps__list .wtg-step__body p:not(:last-child){
	margin-bottom:.5rem;
}
/* Links typed into the description are upgraded to the real ".inline-link"
   class from PHP (see wtg_add_link_class() in steps.php) — this rule only
   "forces" the size so it always matches the paragraph copy above. No
   Kalium hover-pseudo neutralizing needed here: ".custom .inline-link:after"
   already handles that site-wide once the class is present. */
.custom .wtg-steps-section .wtg-steps__list .wtg-step__body a.inline-link{
	font-size:var(--wtg-text-base);
}
 
@media only screen and (max-width:910px){
	.custom .wtg-steps-section .wtg-steps__container{ row-gap:1.5rem; flex-direction:column-reverse; }
	.custom .wtg-steps-section .wtg-steps__text,
	.custom .wtg-steps-section .wtg-steps__img{ width:100%; }
	.custom .wtg-steps-section .wtg-steps__img{ max-height:15rem; }
	.custom .wtg-steps-section .wtg-steps__text{ margin:2rem 0 0 0; }
}
 
/* =============================================================================
   BLOCK: Asset checker
   Template: wtg-templates/asset-checker/asset-checker.php
 
   Previously this section deliberately had NO CSS of its own — the
   assumption was that #asset-checker-section / .ac-* were already fully
   covered by the site-wide custom.css and didn't need duplicating. That
   assumption is what broke: whatever the exact reason on the live site
   (a stale cache, a version of custom.css that predates this section,
   load order, etc.), relying on an external stylesheet with no fallback
   is a single point of failure. This block now carries its own complete,
   self-sufficient copy of the styling it needs — values copied verbatim
   from the source — so it renders correctly regardless of whether the
   site's own copy of these rules is present or not.
 
   IDs (#asset-checker-section, #asset-checker) already outrank the
   site's ".custom .ps-container" (0,2,0) on specificity alone, so no
   extra class-chaining is needed here the way it was for the other
   blocks — these selectors are copied as-is from the source.
   ============================================================================= */
 
.custom #asset-checker{
	width:100%;
	font-family:inherit;
	position:relative;
	max-width:680px;
	margin:0 auto;
}
.custom .ac-search-wrap{
	border:1.5px solid rgba(255,255,255,.4) !important;
	background-color:transparent !important;
	border-radius:8px;
	padding:10px 14px;
	display:flex;
	align-items:center;
	gap:10px;
	transition:box-shadow .2s;
}
.custom .ac-search-wrap:focus-within{
	opacity:1;
	box-shadow:0 0 0 3px rgba(128,128,128,.12);
}
.custom .ac-icon{
	width:16px;
	height:16px;
	flex-shrink:0;
	opacity:.5;
}
.custom .ac-input{
	border:none !important;
	background-color:transparent !important;
	color:#fff !important;
	flex:1;
	outline:none;
	font-size:var(--wtg-text-base);
	font-family:inherit;
	min-width:0;
}
.custom .ac-input::placeholder{ color:rgba(255,255,255,.4) !important; opacity:1; }
.custom .ac-clear{
	background:none;
	border:none;
	cursor:pointer;
	color:inherit;
	opacity:.35;
	font-size:.85rem;
	padding:0;
	line-height:1;
	display:none;
	transition:opacity .15s;
}
.custom .ac-clear:hover{ opacity:.7; }
.custom .ac-clear.visible{ display:block; }
.custom .ac-results{
	margin-top:8px;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.custom .ac-card{
	border:1px solid rgba(255,255,255,.35);
	border-radius:8px;
	padding:12px 14px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	opacity:0;
	transform:translateY(4px);
	animation:wtg-ac-fadein .18s ease forwards;
}
@keyframes wtg-ac-fadein{ to{ opacity:1; transform:translateY(0); } }
.custom .ac-card-left{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.custom .ac-brand{
	font-size:var(--wtg-text-base);
	font-weight:600;
	letter-spacing:-.01em;
}
.custom .ac-pill{
	font-size:.65rem;
	font-weight:500;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:2px 7px;
	border-radius:4px;
	border:none;
	background-color:#ffffff3b;
	color:#fff;
	white-space:nowrap;
	flex-shrink:0;
}
.custom .ac-link{
	color:#fff !important;
	opacity:.75;
	font-size:.78rem;
	text-decoration:underline;
	text-underline-offset:2px;
	white-space:nowrap;
	transition:opacity .15s;
	flex-shrink:0;
}
.custom .ac-link:hover{ opacity:1; }
.custom .ac-not-found{
	font-size:var(--wtg-text-base);
	padding:10px 2px;
	display:flex;
	align-items:center;
	gap:8px;
	opacity:0;
	animation:wtg-ac-fadein .18s ease forwards;
}
.custom .ac-not-found a{
	color:#fff !important;
	text-decoration:underline;
	text-underline-offset:2px;
	opacity:.9;
}
 
/* z-index/position for this ".ps-section.dark" instance now come from the
   GLOBAL stacking-order rule near the top of this file (scoped to
   ".custom.wtg-block-scope .ps-section.dark", which this section matches) —
   removed here so the higher-specificity ID selector doesn't fight it. */
.custom #asset-checker-section .ps-container{ padding-top:8rem; padding-bottom:8rem; }
.custom #asset-checker{ max-width:600px; }
 
@media (max-width:600px){
	.custom #asset-checker{ max-width:100%; }
	.custom .ac-card{ flex-direction:column; align-items:flex-start; gap:8px; }
	.custom .ac-link{ font-size:.75rem; }
}