/*
Theme Name: Avada Child — Recruiting Toolbox
Description: Recruiting Toolbox design system layer on Avada. Tokens + the pieces Global Options can't express.
Author: Jelly Digital
Template: Avada
Version: 3.4.0
*/

/* ====== RT tokens ======
   The 8 core colours alias Avada's Global Color Palette (--awb-color1..8), so a
   palette change in Avada > Options > Colors re-skins these classes too. Hex
   fallbacks keep the stylesheet valid if the palette isn't set yet (fresh install).
   Scale steps beyond the 8 slots are child-theme literals: used only by this CSS,
   never by Fusion Builder pickers. Mirrors the Figma Variables collections. */
:root {
	/* -- aliased to Avada global palette -- */
	--rt-white: var(--awb-color1, #FFFFFF);
	--rt-neutral-lightest: var(--awb-color2, #F2F2F2);
	--rt-orange-lightest: var(--awb-color3, #FFF0E5);
	--rt-orange: var(--awb-color4, #FF6F00);
	--rt-peri: var(--awb-color5, #5E83FF);
	--rt-orange-dark: var(--awb-color6, #CC5800);
	--rt-haiti-light: var(--awb-color7, #515871);
	--rt-haiti: var(--awb-color8, #0D1A42);
	/* -- child-theme literals (extended scale) -- */
	--rt-neutral-lighter: #D8D8D8;
	--rt-neutral-light: #B2B2B2;
	--rt-neutral: #7F7F7F;
	--rt-neutral-dark: #4C4C4C;
	--rt-neutral-darkest: #000000;
	--rt-orange-lighter: #FFE2CC;
	--rt-orange-light: #FF9A4C;
	--rt-orange-deep: #B34D00;  /* filled card ground: #CC5800 is only 4.2:1 on white */
	--rt-orange-deepest: #8F3E00;  /* dark end of the card gradient */
	--rt-orange-mid:  #C25400;  /* light end of the card gradient; 4.6:1, the lightest orange that still clears AA */
	--rt-haiti-lightest: #E0E3EB;
	--rt-haiti-dark: #080F22;
	--rt-peri-dark: #4169F2;
	--rt-peri-darker: #2B4BD1;
	--rt-mist: #ECF0F7;
	--rt-peri-lighter: #D6E0FF;
	--rt-peri-tint: #EEF2FF;
	/* -- shape + rhythm -- */
	/* Carbon `chevron-down`, used as a mask so the colour stays a palette token.
	   Swap the path from carbon-icons.json to change the glyph. */
	--rt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
	--rt-chev-run: 5px;    /* how far a chevron travels on hover, both card sets */
	--rt-radius-btn: 2px;  /* every button, and the chrome built to match one */
	--rt-radius-xs: 4px;
	--rt-radius-sm: 8px;
	--rt-radius-squircle: 32px;
	--rt-radius-squircle-lg: 96px;
	--rt-space-1: 8px;  --rt-space-2: 16px; --rt-space-3: 24px;
	--rt-space-4: 32px; --rt-space-6: 48px; --rt-space-8: 64px; --rt-space-12: 96px;
}

/* ====== Buttons ======
   Avada paints fusion_button from CSS custom properties, so variants redefine
   those vars under a class. Add the class in the Button element's "CSS Class"
   field and leave the element's own colour options on DEFAULT (element-level
   colours generate per-instance CSS that beats any class).
   The global default button (Avada > Options > Builder Elements > Button) is
   Primary (per Figma component 4179:8871): orange bg + haiti-dark label (AA),
   1px radius, Inter 500 16, 10/24 padding; hover darkens to orange-dark and
   keeps the dark label. Set in Global Options, not here. */

/* Variants mirror the Figma Button component (node 4179:8871) 1:1.
   Figma defines rest states only; hovers below are the system pattern —
   veto/adjust after seeing them live. */

/* Secondary (Figma Style=Secondary): hairline outline, ink label */
.fusion-button.rt-btn-secondary {
	--button_gradient_top_color: transparent;
	--button_gradient_bottom_color: transparent;
	--button_gradient_top_color_hover: transparent;
	--button_gradient_bottom_color_hover: transparent;
	--button_accent_color: var(--rt-neutral-darkest);
	--button_accent_hover_color: var(--rt-neutral-darkest);
	--button_border_color: rgba(0, 0, 0, .15);
	--button_border_hover_color: var(--rt-haiti-dark);
	--button_border_width-top: 1px; --button_border_width-right: 1px;
	--button_border_width-bottom: 1px; --button_border_width-left: 1px;
}
.fusion-button.rt-btn-secondary { background-image: none; }

/* Tertiary (Figma Style=Tertiary): solid dark */
.fusion-button.rt-btn-tertiary {
	--button_gradient_top_color: var(--rt-haiti-dark);
	--button_gradient_bottom_color: var(--rt-haiti-dark);
	--button_gradient_top_color_hover: var(--rt-haiti);
	--button_gradient_bottom_color_hover: var(--rt-haiti);
	--button_accent_color: var(--rt-white);
	--button_accent_hover_color: var(--rt-white);
	--button_border_width-top: 0; --button_border_width-right: 0;
	--button_border_width-bottom: 0; --button_border_width-left: 0;
}

/* Link (Figma Style=Link): text-only, no padding */
.fusion-button.rt-btn-link {
	--button_gradient_top_color: transparent;
	--button_gradient_bottom_color: transparent;
	--button_gradient_top_color_hover: transparent;
	--button_gradient_bottom_color_hover: transparent;
	--button_accent_color: var(--rt-neutral-darkest);
	--button_accent_hover_color: var(--rt-orange-dark);
	--button_border_width-top: 0; --button_border_width-right: 0;
	--button_border_width-bottom: 0; --button_border_width-left: 0;
	--button_padding-top: 0; --button_padding-right: 0;
	--button_padding-bottom: 0; --button_padding-left: 0;
}
.fusion-button.rt-btn-link, .fusion-button.rt-btn-link:hover { background-image: none; box-shadow: none; }

/* On-dark (Figma Secondary + Alternate=True): white 20% outline on dark sections */
.fusion-button.rt-btn-on-dark {
	--button_gradient_top_color: transparent;
	--button_gradient_bottom_color: transparent;
	--button_gradient_top_color_hover: transparent;
	--button_gradient_bottom_color_hover: transparent;
	--button_accent_color: var(--rt-white);
	--button_accent_hover_color: var(--rt-white);
	--button_border_color: rgba(255, 255, 255, .2);
	--button_border_hover_color: var(--rt-white);
	--button_border_width-top: 1px; --button_border_width-right: 1px;
	--button_border_width-bottom: 1px; --button_border_width-left: 1px;
}
.fusion-button.rt-btn-on-dark { background-image: none; }

/* White (Figma: the button on the orange consulting card) */
.fusion-button.rt-btn-white {
	--button_gradient_top_color: var(--rt-white);
	--button_gradient_bottom_color: var(--rt-white);
	/* Hover settles to a light neutral grey and keeps the dark label, rather
	   than inverting to navy against the brand ground behind it. */
	--button_gradient_top_color_hover: var(--rt-neutral-lighter);
	--button_gradient_bottom_color_hover: var(--rt-neutral-lighter);
	--button_accent_color: #191919;
	--button_accent_hover_color: #191919;
	--button_border_color: var(--rt-white);
	--button_border_hover_color: var(--rt-neutral-lighter);
	--button_border_width-top: 1px; --button_border_width-right: 1px;
	--button_border_width-bottom: 1px; --button_border_width-left: 1px;
}
.fusion-button.rt-btn-white { background-image: none; }

/* Small size (Figma Small=True): 8/20 padding */
.fusion-button.rt-btn-sm {
	--button_padding-top: 8px; --button_padding-right: 20px;
	--button_padding-bottom: 8px; --button_padding-left: 20px;
}

/* Primary button (DECIDED 2026-08-21): set in Global Options, not here —
   orange bg (--awb-color4) + haiti label, hover inverts to haiti bg + white.
   AA pass ~5.5:1. Variant classes above assume this default. */

/* ====== Signature shape language ======
   Squircle corner masks from the mark: one large soft corner, rest tight.
   Apply to image wrappers / columns via CSS class in the builder. */
/* One feature corner per element was the original language: 96px on one corner,
   8px on the other three, varying by element. Retired in favour of a uniform 8px.
   Which corner turned was never derived from anything, so across a page it read
   as arbitrary rather than as a system.

   THE CLASS NAMES ARE KEPT ON PURPOSE. They are still in the page content on
   Home, Training, Consulting and Workshops; redefining them here rather than
   editing four pages means the treatment goes back from this one block. To
   restore it, put the squircle token back in the corner each name points at. */
.rt-corner-tl, .rt-corner-tr, .rt-corner-bl, .rt-corner-br {
  border-radius: var(--rt-radius-sm) !important; overflow: hidden; }
.rt-corner-sm-tr, .rt-corner-sm-bl {
  border-radius: var(--rt-radius-xs) !important; overflow: hidden; }


/* Eyebrow label */
.rt-eyebrow {
	font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
	letter-spacing: .12em; text-transform: uppercase;
}

/* Italic accent inside headings (the who/how treatment) */
.rt-acc, .rt-acc h1, .rt-acc h2, .rt-acc h3, .rt-acc h4 { font-style: italic !important; }

/* Hero scrim for full-bleed image containers */
.rt-scrim, .rt-scrim > .fusion-column-wrapper { position: relative; }
.rt-scrim > .fusion-column-wrapper::before, .rt-scrim:not(:has(> .fusion-column-wrapper))::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(13,26,66,.78) 0%, rgba(13,26,66,.45) 45%, rgba(13,26,66,.08) 75%);
}
.rt-scrim > * { position: relative; z-index: 1; }

/* Logo strip: grayscale, quiet */
.rt-logos img { filter: grayscale(1); opacity: .75; }

/* ====== Header + footer (Layout Builder sections) ====== */
.rt-header .fusion-menu a, .rt-header .fusion-menu .menu-item > span { color: #FFFFFF !important; }
.rt-header .fusion-menu a:hover { color: var(--rt-orange) !important; }
.rt-footlinks a { color: #8FA0B1; display: inline-block; padding: 3px 0; }
.rt-footlinks a:hover { color: #FFFFFF; }
.rt-footer h5.rt-eyebrow { opacity: .85; margin-bottom: 10px; }

/* ====== v0.2 — full home build ====== */

/* Serif accent words in hero (Roboto Serif semibold italic, per Figma) */
.rt-serif { font-family: 'Roboto Serif', Georgia, serif; font-style: italic; font-weight: 600; }

/* Founder photo blob: large rounded top-right + bottom-left */
.rt-corner-diag { border-radius: var(--rt-radius-sm) !important; overflow: hidden; }

/* Animated client logo marquee */
.rt-marquee { overflow: hidden; width: 100%; }
.rt-marquee-track { display: flex; align-items: center; gap: 96px; width: max-content !important; max-width: none !important; animation: rt-marquee 32s linear infinite; }
.rt-marquee-track img { height: 40px !important; width: auto !important; max-width: none !important; filter: grayscale(1); opacity: .6; }
@keyframes rt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rt-marquee:hover .rt-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rt-marquee-track { animation: none; width: 100% !important; justify-content: space-between; }
  /* The duplicate set exists only to make the loop seamless; hide it when static. */
  .rt-marquee-track .rt-marquee-dup { display: none; }
}

/* Tag chip on program cards */
.rt-tag { display: flex; align-items: center; gap: 8px; font: 600 14px/1 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 18px; }
.rt-tag img { height: 12px !important; width: auto !important; }

/* Brand glyphs now live in the media library rather than as inline SVG, so a
   non-dev can swap one by clicking it in the builder. Colour is baked into the
   file (these glyphs are two-tone, which an icon font cannot express), so each
   colourway is its own asset: -peri, -orange, or -ink where colour is fixed. */
.rt-glyph { display: block; height: auto; margin-bottom: 18px; }

/* Where-it-breaks card icons */
.rt-card-icon { height: 24px !important; width: auto !important; display: block; margin-bottom: 14px; }

/* Testimonial card carousel */
.rt-carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rt-carousel::-webkit-scrollbar { display: none; }
.rt-tcard { position: relative; flex: 0 0 400px; height: 500px; border-radius: var(--rt-radius-sm); overflow: hidden; scroll-snap-align: start; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; }
.rt-tcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,26,66,.12) 35%, rgba(13,26,66,.78) 100%); }
.rt-tcard > div { position: relative; padding: 28px; color: #FFFFFF; }
.rt-tcard blockquote { margin: 0 0 16px !important; border: 0 !important; padding: 0 !important; background: transparent !important; font: 400 16px/1.5 'Inter', sans-serif !important; font-style: normal !important; color: #FFFFFF !important; }
.rt-tname { font-weight: 700; }
.rt-trole { font-size: 14px; opacity: .85; }
.rt-tbadge { position: absolute; top: 20px; right: 20px; width: 44px; height: auto; z-index: 1; }
.rt-car-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.rt-dots { display: flex; gap: 8px; }
.rt-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rt-neutral-lighter); display: inline-block; }
.rt-dots span.on { background: var(--rt-haiti); }
.rt-car-btn { width: 48px; height: 48px; border: 1px solid var(--rt-neutral-lighter); border-radius: var(--rt-radius-sm); background: #FFF; color: var(--rt-haiti); font-size: 17px; cursor: pointer; margin-left: 12px; transition: border-color .15s; }
.rt-car-btn:hover { border-color: var(--rt-haiti); }

/* Contact form (static visual parity — wire to Avada Forms on staging) */
.rt-form label { display: block; font: 400 15px/1 'Inter', sans-serif; color: var(--rt-haiti); margin: 18px 0 8px; }
.rt-form input[type=text], .rt-form input[type=email], .rt-form textarea { width: 100%; background: var(--rt-neutral-lightest); border: 0; border-radius: var(--rt-radius-xs); padding: 12px; font: 400 15px 'Inter', sans-serif; }
.rt-form textarea { height: 150px; resize: vertical; }
.rt-form .rt-check { display: flex; gap: 8px; align-items: center; margin: 18px 0 26px; font-size: 14px; color: var(--rt-haiti); }
.rt-form .rt-check input { width: auto; }
.rt-submit { background: var(--rt-orange); color: var(--rt-haiti); border: 0; border-radius: var(--rt-radius-xs); padding: 14px 30px; font: 600 15px 'Inter', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.rt-submit:hover { background: var(--rt-haiti); color: #FFF; }

/* Square-cropped photos (contact section) */
.rt-photo-sq img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Stat column dividers */
.rt-divide-l { border-left: 1px solid var(--rt-haiti-lightest); }

/* Light footer */
.rt-footer-light a { color: var(--rt-haiti); }
.rt-footer-light a:hover { color: var(--rt-orange-dark); }
.rt-footlinks-dark a { color: var(--rt-haiti); display: inline-block; padding: 4px 0; font-weight: 600; font-size: 14px; }
.rt-footlinks-dark a:hover { color: var(--rt-orange-dark); }

/* ====== Training hub template (v0.4) ======
   Classes consumed by the Training hub page (Figma node 12337:30625).
   Card/pill/stat/quote patterns are the reusable service-page kit. */
.rt-logorow { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.rt-logorow img { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
/* Card chrome lives on the inner wrapper, NOT the column/grid cell — Avada
   builds grid gutters as padding on the cell, so styling the cell kills gaps. */
#main .rt-pcard > .fusion-column-wrapper { background: var(--rt-white); border-radius: 2px; box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03); padding: 24px; height: 100%; }
#main .rt-pcard-dark > .fusion-column-wrapper { background: var(--rt-peri-darker); }
/* Program card icon: a swappable Carbon icon, not a baked PNG. Colour comes
   from the token, so it follows a palette change. */
#main .rt-pcard .rt-cardicon { display: block; color: var(--rt-peri-darker); margin-bottom: 24px; }
#main .rt-pcard-dark .rt-cardicon { color: var(--rt-white); }
/* Equal card heights: the grid cell stretches, the card fills it. */
#main .rt-programs ul.fusion-grid { align-items: stretch; }
#main .rt-programs ul.fusion-grid > li.rt-pcard { display: flex; flex-direction: column; }
#main .rt-programs .rt-pcard > .fusion-column-wrapper { flex: 1 1 auto; }
/* Divider and link sit on the card's bottom edge, as in the design, so the
   "Learn more" line reads as a row across the grid rather than floating. */
#main .rt-programs .rt-pcard .fusion-separator { margin-top: auto !important; }
/* The John band photo: a real portrait, matched to the text column beside it. */
#main .rt-johnband img { display: block; width: 100%; height: 480px; object-fit: cover; }
@media (max-width: 1024px) { #main .rt-johnband img { height: 340px; } }
.rt-pcard-dark .rt-ctitle, .rt-pcard-dark .rt-pcat, .rt-pcard-dark .rt-pbody, .rt-pcard-dark .rt-plink { color: #FFFFFF; }
.rt-pcard-dark .fusion-content-tb, .rt-pcard-dark .fusion-content-tb p { color: #FFFFFF; }
/* Grid tiles stretch to equal row height (assessment tile matches neighbours) */
.rt-programs ul.fusion-grid { align-items: stretch !important; }
.rt-picon { display: block; width: 40px; height: auto; margin-bottom: 24px; }
.rt-pcat { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 8px; }
.rt-ctitle { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4; letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 8px; }
.rt-pbody { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 24px; }
.rt-tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; }
.rt-tag2 { display: inline-block; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.15); border-radius: var(--rt-radius-btn); padding: 4px 10px; font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest); }
.rt-hr { border: 0; border-top: 1px solid rgba(0,0,0,.15); margin: 0 0 24px; }
.rt-pcard-dark .rt-hr { border-top-color: rgba(255,255,255,.3); }
.rt-plink { font: 500 16px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest); text-decoration: none; }
.rt-plink::after { content: " ›"; }
.rt-plink:hover { color: var(--rt-orange-dark); }
.rt-pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.rt-pill { display: inline-block; border-radius: 999px; padding: 10px 16px; font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); background: #FFFFFF; border: 1px solid rgba(0,0,0,.2); text-decoration: none; }
.rt-pill.on { background: var(--rt-haiti); border-color: var(--rt-haiti); color: #FFFFFF; font-weight: 500; }
.rt-quote { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 600; font-size: 44px; line-height: 1.2; letter-spacing: -.01em; color: #FFFFFF; margin: 0 0 24px; }
/* Stats: the divider belongs BETWEEN stats, not before the first one. A leading
   border sat outside the container's content edge, and the 32px left padding
   pushed the first stat's text right of the heading above it. The first stat now
   starts flush with the container, so its number lines up with the heading. */
.rt-stat { border-left: 0; padding: 32px 32px 32px 0; }
.rt-stat ~ .rt-stat { border-left: 1px solid rgba(0,0,0,.15); padding-left: 32px; }
.rt-statn { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 64px; line-height: 1.1; letter-spacing: -.02em; color: var(--rt-haiti); margin: 0 0 48px; }
.rt-stath { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.4; color: var(--rt-haiti); margin: 0 0 8px; }
.rt-checklist { list-style: none; margin: 16px 0 0; padding: 0; }
.rt-checklist li { position: relative; padding-left: 32px; margin-bottom: 16px; font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); }
.rt-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--rt-peri-darker); font-weight: 700; }
.rt-qcard { flex: 0 0 405px; background: var(--rt-neutral-lightest); border: 1px solid rgba(0,0,0,.15); border-radius: 2px; padding: 32px; scroll-snap-align: start; }
.rt-qlogo { height: 34px; width: auto; margin-bottom: 48px; display: block; }
.rt-qtext { font: 400 18px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 24px; }
.rt-qavatar { display: flex; gap: 16px; align-items: center; }
.rt-qavatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.rt-qname { font: 600 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
.rt-qrole { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
/* ====== Resource cards (v2.6) ======
   Figma 12513-5546. A native Post Cards grid over the Resources collection
   using the "RT Resource Card" template, so the strip follows the posts and
   nobody edits a page to change it. The whole column is the link, set
   dynamically to the post permalink, which is why the card has no button.
   Card chrome sits on the column wrapper because the grid gutter is padding on
   the cell; the image then breaks back out of that padding to sit flush. */
/* The li is the grid cell; the wrapper is the visible card. Making the cell a
   flex column and letting the wrapper grow is what equalises card heights,
   because the link overlay Avada injects is absolutely positioned and a
   percentage height on the wrapper has nothing definite to resolve against. */
#main .rt-rcards ul.fusion-grid > li.rt-rcard { display: flex; flex-direction: column; }
#main .rt-rcards .rt-rcard > .fusion-column-wrapper {
  background: var(--rt-white); border-radius: var(--rt-radius-xs); overflow: hidden;
  box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03);
  padding: 24px 24px 32px; flex: 1 1 auto;
  transition: box-shadow .2s ease, transform .2s ease; }
#main .rt-rcards .rt-rcard:hover > .fusion-column-wrapper {
  box-shadow: 0 18px 28px -6px rgba(0,0,0,.13), 0 6px 10px -3px rgba(0,0,0,.05);
  transform: translateY(-2px); }
#main .rt-rcards .rt-rimg { margin: -24px -24px 24px; }
#main .rt-rcards .rt-rimg img { display: block; width: 100%; }
#main .rt-rcards .rt-rcat, #main .rt-rcards .rt-rcat a {
  font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest);
  text-decoration: none; margin: 0 0 8px; }
#main .rt-rcards .rt-rtitle, #main .rt-rcards .rt-rtitle h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 8px; }
#main .rt-rcards .fusion-content-tb, #main .rt-rcards .fusion-content-tb p {
  font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
#main .rt-rcards .rt-rcat p { margin: 0; font: inherit; color: inherit; }
/* Avada's own responsive sheet forces .fusion-grid-3 columns to 50% below its
   3-column breakpoint, which sits above 1440. Pin the real widths, same as the
   programs grid does. */
#main .rt-rcards ul.fusion-grid { align-items: stretch; }
@media (max-width: 800px) {
  #main .rt-rcards .rt-rtitle, #main .rt-rcards .rt-rtitle h3 { font-size: 24px; }
}
.fusion-flex-column.rt-btnrow .fusion-column-wrapper { display: block !important; }
.fusion-flex-column.rt-btnrow .fusion-column-wrapper > div:has(> a.fusion-button) { display: inline-block !important; width: auto !important; margin-right: 16px; margin-top: 8px; }

/* Designed pages (100% width template) sit BELOW the nav, not under it.
   The reskinned bar is opaque white, so a flush hero would be hidden behind it.
   Avada's own 60px #main padding is replaced by the real nav height.
   (Pre-reskin this was `padding-top: 0` for the transparent overlay header.) */
.page-template-100-width #main { padding-top: var(--rt-navh); }

/* Post Cards program grid: dynamic term outputs styled as system chips/pills */
.rt-pcat-dyn a, .rt-pcat-dyn { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); text-decoration: none; }
.rt-termtags a { display: inline-block; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.15); border-radius: var(--rt-radius-btn); padding: 4px 10px; font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest); text-decoration: none; margin: 0 4px 4px 0; pointer-events: none; cursor: default; }
.rt-pcard-dark .fusion-button.rt-btn-link, .fusion-button.rt-btn-link.rt-link-on-dark { --button_accent_color: var(--rt-white); --button_accent_hover_color: var(--rt-white); }
/* Filters render as Avada portfolio-style tabs; restyle as RT pills */
.rt-programs .fusion-filters { border: 0; margin-bottom: 48px; }
.rt-programs .fusion-filter { margin: 0 8px 8px 0; border: 0; }
.rt-programs .fusion-filters .fusion-filter a { display: inline-block; border-radius: 999px; padding: 10px 16px; font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti) !important; background: #FFFFFF; border: 1px solid rgba(0,0,0,.2) !important; outline: none !important; box-shadow: none !important; text-decoration: none; }
.rt-programs .fusion-filters .fusion-filter.fusion-active a { background: var(--rt-peri-darker); border: 1px solid var(--rt-peri-darker) !important; color: #FFFFFF !important; font-weight: 500; }

/* ====== Program single template (v0.6) ====== */
.single-rt_program #main { padding-top: var(--rt-navh); }
/* Dark "what your team learns" grid cells */
/* Learning grid (Figma 12513-5960). One continuous bordered grid on peri-darker,
   not separate boxes: cells carry a left and bottom hairline, the row's first
   cell and the last row drop theirs, and the wrapper draws the outer frame.
   Avada gutters the cells with padding, so the borders go on the wrapper. */
/* The frame is built from the cells, not the container: the container is
   full-bleed and its border would run past the content edge. */
#main .rt-learn-cell > .fusion-column-wrapper {
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.2);
  padding: 24px; height: 100%; }
#main .rt-learn-cell:last-child > .fusion-column-wrapper { border-right: 1px solid rgba(255,255,255,.2); }
#main .rt-learn-grid-last .rt-learn-cell > .fusion-column-wrapper { border-bottom: 1px solid rgba(255,255,255,.2); }
/* The two rows are separate containers; Avada's default column bottom margin
   would otherwise leave a gap where the shared divider should be. */
#main .rt-learn-grid .fusion-layout-column { margin-bottom: 0 !important; }
/* Stacked, the vertical rules read as open brackets. Reduce to a divided list. */
@media (max-width: 800px) {
  #main .rt-learn-cell > .fusion-column-wrapper {
    border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
  #main .rt-learn-grid-last .fusion-builder-row > .fusion-layout-column:last-child > .fusion-column-wrapper {
    border-bottom: 1px solid rgba(255,255,255,.2) !important; }
}
#main .rt-learn-cell .rt-learnicon { display: block; color: var(--rt-white); margin-bottom: 24px; }
#main .rt-learn-cell h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.4;
  letter-spacing: -.01em; color: #FFFFFF; margin: 0 0 16px; }
#main .rt-learn-cell p { font: 400 16px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.85); margin: 0; }
/* Cells in a row match height so the hairlines run unbroken. */
#main .rt-learn-grid .fusion-builder-row { align-items: stretch; }

/* Delivery modes (Figma 12513-6039): white band, haiti type, 48px Carbon icons. */
#main .rt-delivery .rt-deliveryicon { display: block; color: var(--rt-haiti); margin-bottom: 24px; }
#main .rt-delivery h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 16px; }
#main .rt-delivery p { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }

/* ====== Post Cards three-up widths (shared) ======
   Avada's own responsive sheet forces .fusion-grid-3 cells to 50% below its
   3-column breakpoint, which sits above 1440, so every three-up Post Cards grid
   silently renders two-up. Pin the real widths once, here, for all of them.
   Add any new three-up grid's class to this selector rather than copying it. */
#main .rt-rcards ul.fusion-grid > li.fusion-grid-column,
#main .rt-programs ul.fusion-grid > li.fusion-grid-column,
#main .rt-toolcards ul.fusion-grid > li.fusion-grid-column { width: calc(100% / 3) !important; }
@media (max-width: 1024px) {
  #main .rt-rcards ul.fusion-grid > li.fusion-grid-column,
  #main .rt-programs ul.fusion-grid > li.fusion-grid-column,
  #main .rt-toolcards ul.fusion-grid > li.fusion-grid-column { width: 50% !important; } }
@media (max-width: 640px) {
  #main .rt-rcards ul.fusion-grid > li.fusion-grid-column,
  #main .rt-programs ul.fusion-grid > li.fusion-grid-column,
  #main .rt-toolcards ul.fusion-grid > li.fusion-grid-column { width: 100% !important; } }

/* "Where it breaks" list items (Figma 12513-5934): Carbon icon above the text,
   28px heading, 16px body. Replaces the inline square markers. */
#main .rt-breakicon { display: block; color: var(--rt-haiti); margin-bottom: 24px; }
#main .rt-breakcol h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 24px; }
#main .rt-breakcol p { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }

/* Workshops lab features (Figma 12513-6876): Carbon icon, 36px heading, 16px
   body, with the row rule and the dividers between items carrying the design's
   rgba(0,0,0,.15) rather than a lighter grey. */
#main .rt-labicon { display: block; color: var(--rt-peri-darker); margin-bottom: 32px; }
#main .rt-labfeat h3 {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 36px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 24px; }
#main .rt-labfeat p { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
#main .rt-eligicon { display: block; margin-bottom: 24px; }
#main .rt-elig-yes .rt-eligicon { color: var(--rt-peri-darker); }
#main .rt-elig-no .rt-eligicon { color: var(--rt-neutral); }
@media (max-width: 800px) { #main .rt-labfeat h3 { font-size: 28px; } }

/* About pages (Figma 12513-8602) ====================================== */
#main .rt-aboutphoto img, #main .rt-aboutsplitimg img {
  display: block; width: 100%; height: 480px; object-fit: cover; border-radius: var(--rt-radius-xs); }
@media (max-width: 1024px) { #main .rt-aboutphoto img, #main .rt-aboutsplitimg img { height: 340px; } }
#main .rt-aboutcta .fusion-button { margin: 0 auto; display: table; }
/* Person profile header (Figma 12513-8603): a peri-darker band that stops
   partway down, with the headshot overhanging into the white below. Same hard
   split as the program heroes, tuned so the photo straddles it. */
/* A fixed depth, not a percentage: these heroes carry different amounts of copy
   and a percentage let the buttons fall out of the band on the longer one. */
#main .fusion-fullwidth.rt-profilesplit {
  background: linear-gradient(180deg,
    var(--rt-peri-darker) 0, var(--rt-peri-darker) var(--rt-split, 560px),
    #FFFFFF var(--rt-split, 560px), #FFFFFF 100%) !important; }
#main .rt-profilerole, #main .rt-profilerole p {
  font: 400 18px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.85); margin: 0; }
#main .rt-profilephoto .fusion-post-card-image {
  background: var(--rt-neutral-lightest); border-radius: var(--rt-radius-xs); overflow: hidden; }
#main .rt-profilephoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { #main .fusion-fullwidth.rt-profilesplit { --rt-split: 78%; } }

/* Team grid: square headshot, name, role. The whole card links to the profile. */
#main .rt-people ul.fusion-grid > li.rt-personcard { display: flex; flex-direction: column; }
#main .rt-personcard > .fusion-column-wrapper { flex: 1 1 auto; }
/* rt-avatar-placeholder.png is a fully transparent 96px PNG, so a person with
   no headshot rendered as nothing at all. The slot carries its own ground, and
   an empty one now reads as a photo still to come. */
#main .rt-people .rt-personimg {
  margin-bottom: 20px; background: var(--rt-neutral-lightest);
  border-radius: var(--rt-radius-xs); overflow: hidden; }
#main .rt-people .rt-personimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#main .rt-people .rt-personname, #main .rt-people .rt-personname h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 4px; }
#main .rt-people .rt-personrole, #main .rt-people .rt-personrole p {
  font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 0; }
#main .rt-people .rt-personcard:hover .rt-personname h3 { color: var(--rt-orange-dark); }
/* Avada forces .fusion-grid-4 cells narrow below its own breakpoint, same trap
   as the three-up grids. */
#main .rt-people ul.fusion-grid > li.fusion-grid-column { width: 25% !important; }
@media (max-width: 1024px) { #main .rt-people ul.fusion-grid > li.fusion-grid-column { width: 50% !important; } }
@media (max-width: 640px)  { #main .rt-people ul.fusion-grid > li.fusion-grid-column { width: 100% !important; } }

/* Free tool cards (Figma 12513-6179): cover, title, description, then a
   full-width button to the gated landing page. Equal heights with the button
   pinned to the bottom edge, same pattern as the programs grid. */
#main .rt-toolcards ul.fusion-grid > li.rt-toolcard { display: flex; flex-direction: column; }
#main .rt-toolcard > .fusion-column-wrapper {
  background: var(--rt-white); border-radius: var(--rt-radius-xs); overflow: hidden;
  box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03);
  padding: 24px 24px 32px; flex: 1 1 auto; display: flex; flex-direction: column; }
#main .rt-toolcards .rt-toolimg { margin: -24px -24px 24px; }
#main .rt-toolcards .rt-toolimg img { display: block; width: 100%; }
#main .rt-toolcards .rt-tooltitle, #main .rt-toolcards .rt-tooltitle h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--rt-haiti); margin: 0 0 8px; }
#main .rt-toolcards .fusion-content-tb, #main .rt-toolcards .fusion-content-tb p {
  font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
/* The button sits on the card's bottom edge and spans it, as in the design. */
#main .rt-toolcards .rt-toolbtnwrap { margin-top: auto; padding-top: 24px; }
#main .rt-toolcards .rt-toolbtn { display: flex; width: 100%; justify-content: center; }
@media (max-width: 800px) {
  #main .rt-toolcards .rt-tooltitle, #main .rt-toolcards .rt-tooltitle h3 { font-size: 24px; }
}

/* Quote card (Figma 12513-6040): 640px tall, content centred, capped at 560px. */
#main .rt-quotecard > .fusion-column-wrapper { min-height: 640px; display: flex; flex-direction: column; justify-content: center; }
#main .rt-quotecard .fusion-builder-row-inner { max-width: 560px; }
@media (max-width: 800px) { #main .rt-quotecard > .fusion-column-wrapper { min-height: 460px; } }

/* Program hero (Figma 12513-5909): a hard 50/50 split so the photo straddles
   the change from peri-darker to the page ground. --rt-split is tuned to the
   image's midpoint rather than the container's, which is why it is not 50%. */
#main .fusion-fullwidth.rt-herosplit {
  background: linear-gradient(180deg,
    var(--rt-peri-darker) 0, var(--rt-peri-darker) var(--rt-split, 56%),
    #FFFFFF var(--rt-split, 56%), #FFFFFF 100%) !important; }
#main .rt-herosplit .fusion-imageframe img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 800px) { #main .fusion-fullwidth.rt-herosplit { --rt-split: 62%; } }
/* Consulting services run the same hero on the orange side of the palette. */
#main .fusion-fullwidth.rt-herosplit-c {
  background: linear-gradient(180deg,
    var(--rt-orange-dark) 0, var(--rt-orange-dark) var(--rt-split, 56%),
    #FFFFFF var(--rt-split, 56%), #FFFFFF 100%) !important; }
/* Orange delivery-mode columns on dark */
/* Star rating row */
.rt-stars { color: var(--rt-orange); font-size: 16px; letter-spacing: 2px; white-space: nowrap; }
/* Get-started / resource cards */
#main .rt-getcard > .fusion-column-wrapper { background: #FFFFFF; border-radius: 2px; box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03); padding: 16px 16px 24px; height: 100%; }
/* Step cards (white, inside tint section) */
#main .rt-stepcard > .fusion-column-wrapper { background: #FFFFFF; border-radius: 8px; padding: 0; height: 100%; overflow: hidden; }
.rt-step-eyebrow { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 8px; }
/* Step cards: outer column is the white card, inner cols form text/photo halves */
#main .rt-steprow > .fusion-column-wrapper { background: #FFFFFF; border-radius: 8px; overflow: hidden; padding: 0; }
.rt-steprow .fusion-builder-row-inner { align-items: stretch !important; }
.rt-steprow .fusion-builder-row-inner > .fusion-layout-column { margin-top: 0 !important; margin-bottom: 0 !important; }
.rt-steprow .fusion-builder-row-inner > .fusion-layout-column > .fusion-column-wrapper { height: 100%; }

/* ====== Home template (v0.7) ====== */
/* Problem link-cards: whole card is a link; hover floods brand colour
   (rt-linkcard-t = training/peri, rt-linkcard-c = consulting/orange) */
/* Cards stretch to a common height so the hover flood covers the whole card,
   including the shortest one. The column itself must stretch too, not just
   its wrapper, or a short card floods only as far as its content. */
#main .rt-linkcard > .fusion-column-wrapper { background: transparent; padding: 32px 24px; height: 100%; display: flex; flex-direction: column; transition: background .18s ease; }
#main .rt-linkcard { align-self: stretch; }
#main .rt-linkcard h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--rt-haiti); margin: 0 0 12px; }
#main .rt-linkcard p { font: 400 14px/1.6 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 0 0 24px; }
.rt-linkcard .rt-plink { font-size: 14px; }
.rt-linkcard svg { display: block; width: 28px; height: auto; margin-bottom: 20px; }
/* Hover no longer floods with colour: the cards carry their ground at rest, so
   the flood has nowhere to go. They lift instead, and the product chip firms up. */
.rt-linkcard:hover .rt-plink { text-decoration: underline; }
/* Service cards: flat brand ground, italic headline, photo flush at bottom */
/* Offer cards (Figma 12513:5498 "Layout / 360 /").
   Ground colours are the DARKER steps, not the base brand colours: Training is
   peri-darker and Consulting is orange-dark, both carrying white text. Each card
   turns exactly one corner — bottom-left on Training, top-right on Consulting —
   and clips the flush image with it. */
/* Flat at rest, lifting on hover, same as the problem cards above. The shadow is
   tinted with the brand ink rather than pure black: these sit on a peri band, and
   a black shadow on a coloured ground reads as grey haze. */
#main .rt-svc > .fusion-column-wrapper { padding: 0; height: 100%; display: flex; flex-direction: column;
  border-radius: var(--rt-radius-sm); box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease; }
#main .rt-svc:hover > .fusion-column-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgba(13,26,66,.20), 0 4px 12px -4px rgba(13,26,66,.08); }
@media (prefers-reduced-motion: reduce) {
  #main .rt-svc:hover > .fusion-column-wrapper { transform: none; } }
#main .rt-svc > .fusion-column-wrapper > .fusion-builder-row-inner { flex: 1 0 auto; }
#main .rt-svc-t > .fusion-column-wrapper { background: var(--rt-peri-darker); }
#main .rt-svc-c > .fusion-column-wrapper { background: var(--rt-orange-dark); }

/* Uniform 8px, no feature corner. These previously turned one corner each at the
   full 96px (bottom-left on Training, top-right on Consulting), which read as
   arbitrary rather than as a system. The .rt-corner-bl / -tr classes are still on
   the columns in the page content; overriding here rather than editing the page
   means the treatment can be put back from one place. */
#main .rt-svc.rt-corner-bl, #main .rt-svc.rt-corner-tr,
#main .rt-svc-t > .fusion-column-wrapper, #main .rt-svc-c > .fusion-column-wrapper {
  border-radius: var(--rt-radius-sm) !important; }
/* The column must NOT clip. The transform is on the wrapper inside it, so any
   overflow:hidden on the column cuts the 6px hover rise off at the top and stops
   the shadow escaping. The wrapper carries the background and the radius, so its
   own overflow (further down) is what actually clips the flush image.

   Overriding rather than editing the shared .rt-corner-* helper: those still
   clip on Training, Consulting and Workshops, where the element being rounded is
   the one holding the content. Here it is not. */
#main .rt-svc, #main .rt-svc.rt-corner-bl, #main .rt-svc.rt-corner-tr { overflow: visible; }

/* Everything on the card ground is white */
#main .rt-svc .rt-svc-eyebrow { font: 600 16px/1.5 'Inter', sans-serif; color: var(--rt-white); margin: 0 0 8px; }
#main .rt-svc h3 { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 600;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.2; letter-spacing: -.44px; color: var(--rt-white); margin: 0 0 24px; }
#main .rt-svc .rt-svc-body { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-white); margin: 0 0 32px; }

/* Flush image, pinned to the bottom of the card. The image carries NO radius of
   its own: Avada rounds imageframes globally, which would fight the card's own
   corner and read as a cropped or double-curved edge. Only the card clips. */
.rt-svc .fusion-image-element, .rt-svc .fusion-imageframe { margin: 0 !important; line-height: 0;
  border-radius: 0 !important; overflow: visible !important; }
#main .rt-svc img { display: block; width: 100%; aspect-ratio: 624 / 360; object-fit: cover;
  margin: 0 !important; border-radius: 0 !important; }
/* The wrapper holds the background, so it must clip too or the image corner
   escapes the rounded card. */
#main .rt-svc > .fusion-column-wrapper { overflow: hidden; }

/* ====== Workshop / event template (v0.8) ====== */
/* Sticky in-page section nav: sticks under the fixed header, highlights the
   section in view (scrollspy JS in functions.php). */
.fusion-fullwidth.rt-secnav-wrap, .rt-secnav-wrap { position: -webkit-sticky !important; position: sticky !important; top: var(--rt-stickytop, 0px); z-index: 90; transition: top .32s cubic-bezier(.4,0,.2,1); background: #FFFFFF; border-top: 1px solid rgba(0,0,0,.1); border-bottom: 1px solid rgba(0,0,0,.1); }
/* sticky needs a non-clipping ancestor chain */
.page-template-100-width #main, .page-template-100-width .fusion-row, .page-template-100-width #wrapper { overflow: visible !important; }
.rt-secnav-wrap .fusion-builder-row { max-width: none !important; }
.rt-secnav { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 0 32px; min-height: 80px; flex-wrap: wrap; }
.rt-secnav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-secnav-links a { display: inline-block; padding: 8px 14px; border-radius: 2px; font: 500 15px/1.4 'Inter', sans-serif; color: var(--rt-haiti); text-decoration: none; transition: background .15s, color .15s; }
.rt-secnav-links a:hover { background: rgba(0,0,0,.05); }
.rt-secnav-links a.on { background: var(--rt-haiti); color: #FFFFFF; }
.rt-secnav .rt-secnav-cta { display: inline-block; background: var(--rt-orange); color: var(--rt-haiti-dark); font: 600 15px/1.4 'Inter', sans-serif; padding: 12px 22px; border-radius: var(--rt-radius-btn); text-decoration: none; transition: background .15s, color .15s; }
.rt-secnav .rt-secnav-cta:hover { background: var(--rt-orange-dark); color: var(--rt-haiti-dark); }
/* Anchor offset so headings clear header + sticky bar */
.rt-anchor { scroll-margin-top: 160px; }
/* Hero fact grid (date / location / format / fee) */
.rt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.rt-facts .k { font: 400 15px/1.4 'Inter', sans-serif; color: #B9C2D0; margin: 0 0 6px; }
.rt-facts .v { font: 700 18px/1.4 'Inter', sans-serif; color: #FFFFFF; margin: 0; }
/* Logistics definition rows */
.rt-deftable { border-top: 1px solid rgba(0,0,0,.15); }
.rt-defrow { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.rt-defrow dt { font: 600 12px/1.5 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-haiti-light); margin: 0; }
.rt-defrow dd { font: 400 16px/1.6 'Inter', sans-serif; color: var(--rt-haiti); margin: 0; }
/* Apply form card */
#main .rt-formcard > .fusion-column-wrapper { background: #FFFFFF; border-radius: 2px; padding: 40px; }
.rt-formcard .rt-form > .rt-fgrid > div > label:first-child { margin-top: 0; }
.rt-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.rt-fgrid .full { grid-column: 1 / -1; }
.rt-form select { width: 100%; background: var(--rt-neutral-lightest); border: 0; border-radius: 4px; padding: 12px; font: 400 15px 'Inter', sans-serif; color: var(--rt-haiti-light); }
/* Inline meta row (date + venue) */
.rt-inlinemeta { display: flex; gap: 28px; flex-wrap: wrap; font: 400 15px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin-top: 24px; }
.rt-accent-peri { color: var(--rt-peri); }
.rt-accent-orange { color: var(--rt-orange); }

/* ====== Avada Form styling (v2.6) — Figma 12521-16178 ======
   The real Avada form, not the HTML mock. Fields are laid out as Avada columns
   inside the form, so the two-up rows come from the column widths and the 24px
   gutter is set here rather than per field. */
.fusion-form-form-wrapper label, .fusion-form-label {
	display: block; font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin-bottom: 8px; }
.fusion-form-form-wrapper input[type=text], .fusion-form-form-wrapper input[type=email],
.fusion-form-form-wrapper input[type=tel], .fusion-form-form-wrapper textarea,
.fusion-form-form-wrapper select {
	width: 100%; height: 48px !important; min-height: 48px !important; box-sizing: border-box !important; background: rgba(0,0,0,.05) !important;
	border: 1px solid rgba(0,0,0,.15) !important; border-radius: var(--rt-radius-btn) !important;
	padding: 8px 12px !important; font: 400 16px/1.5 'Inter', sans-serif !important;
	color: var(--rt-haiti) !important; box-shadow: none !important; }
.fusion-form-form-wrapper input:focus, .fusion-form-form-wrapper select:focus,
.fusion-form-form-wrapper textarea:focus { border-color: var(--rt-haiti) !important; outline: none; }
.fusion-form-form-wrapper textarea { height: auto !important; min-height: 150px !important; resize: vertical; }
.fusion-form-form-wrapper input::placeholder, .fusion-form-form-wrapper textarea::placeholder { color: var(--rt-neutral); }
/* Native select arrows differ per browser, so draw the Carbon chevron instead. */
.fusion-form-form-wrapper select { -webkit-appearance: none; appearance: none; padding-right: 44px !important; }
.fusion-form-form-wrapper .fusion-form-field .fusion-select-wrapper .select-arrow { display: none !important; }
.fusion-form-form-wrapper .fusion-form-select-field,
.fusion-form-form-wrapper .fusion-form-field:has(select) { position: relative; }
.fusion-form-form-wrapper .fusion-form-field:has(select)::after {
	content: ""; position: absolute; right: 12px; bottom: 12px; width: 24px; height: 24px;
	background-color: var(--rt-haiti); pointer-events: none;
	-webkit-mask: var(--rt-chevron) center / contain no-repeat;
	mask: var(--rt-chevron) center / contain no-repeat; }
.fusion-form-form-wrapper select:invalid, .fusion-form-form-wrapper select option[value=""] { color: var(--rt-neutral) !important; }
.fusion-form-form-wrapper .fusion-form-consent-field label,
.fusion-form-form-wrapper .fusion-form-checkbox label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.fusion-form-form-wrapper .fusion-form-submit-field { margin-top: 8px; }
.fusion-form-form-wrapper .fusion-button { margin-top: 8px; }
/* Field columns. Avada gutters columns with a percentage padding and a 20px
   top+bottom margin, which reads as a 40px row gap; the design wants 24px both
   ways. Avada writes those as inline custom properties, so the override has to
   be !important to land. */
.fusion-form-form-wrapper .fusion-builder-row {
	width: 100% !important; max-width: 100% !important;
	margin-left: -12px !important; margin-right: -12px !important; }
.fusion-form-form-wrapper .fusion-builder-row > .fusion-layout-column {
	padding-left: 12px !important; padding-right: 12px !important;
	margin: 0 0 24px !important; }
/* Avada also gutters the inner wrapper, which is what pushes the first field
   ~11px right of the heading above it. */
.fusion-form-form-wrapper .fusion-layout-column > .fusion-column-wrapper {
	margin-left: 0 !important; margin-right: 0 !important; }
.fusion-form-form-wrapper { --awb-field-margin-top: 0px; --awb-field-margin-bottom: 0px; }
.fusion-form-form-wrapper .fusion-form-field { margin-top: 0 !important; margin-bottom: 0 !important; }
.fusion-form-form-wrapper .fusion-form-submit-field { margin-top: 0 !important; }
/* The form is its own container, so it inherits the global container side
   padding and sits inset from the heading above it. */
.fusion-form-form-wrapper .fusion-fullwidth { padding-left: 0 !important; padding-right: 0 !important; }
.fusion-form-form-wrapper .fusion-builder-row > .fusion-layout-column:last-child { margin-bottom: 0 !important; }

/* Consent / checkbox visibility (Avada hides native input for custom styling) */
.fusion-form-form-wrapper .fusion-form-consent-field input[type=checkbox],
.fusion-form-form-wrapper input[type=checkbox] { -webkit-appearance: checkbox !important; appearance: checkbox !important; opacity: 1 !important; position: static !important; width: 16px !important; height: 16px !important; margin-right: 8px !important; accent-color: var(--rt-orange); }
.fusion-form-form-wrapper .fusion-form-consent-field { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 24px; }
.fusion-form-form-wrapper .fusion-form-consent-field label { margin-bottom: 0; }
/* The element's CSS class lands on the field wrapper, not the button, so the
   padding has to be aimed at the button or it indents the whole row. */
.fusion-form-form-wrapper .fusion-form-submit-field { padding: 0 !important; margin-top: 16px !important; }
.fusion-form-form-wrapper .fusion-form-submit-field .fusion-button { padding: 14px 30px !important; margin-top: 0 !important; }
/* The contact photo is a fixed 734px column in the design, not an aspect ratio. */
#main .rt-contactphoto img { display: block; width: 100%; height: 734px; object-fit: cover; }
@media (max-width: 1024px) { #main .rt-contactphoto img { height: 420px; } }

/* ====== FAQ accordion (v2.6) ======
   Avada's default icon colour is palette 1 (white on a white ground) and its
   hover accent is palette 5 (periwinkle). Both are set in Global Options now.
   The glyph itself is Carbon `chevron-down`: Carbon ships SVG only, so it is a
   mask and the colour comes from background-color, which keeps it on a token. */
#main .fusion-accordian .panel-title a { color: var(--rt-haiti); align-items: center; }
/* Avada forces `background-color: transparent !important` on unboxed toggle
   icons, so the mask needs !important or it paints nothing at all. */
#main .fusion-accordian .panel-title a:not(.active) i.active-icon,
#main .fusion-accordian .panel-title a.active i.inactive-icon { display: none; }
#main .fusion-accordian .panel-title a:not(.active) i.inactive-icon,
#main .fusion-accordian .panel-title a.active i.active-icon { display: inline-block; }
#main .fusion-accordian .panel-title a i.fa-fusion-box {
	background-color: var(--rt-haiti) !important;
	-webkit-mask: var(--rt-chevron) center / contain no-repeat;
	mask: var(--rt-chevron) center / contain no-repeat;
	width: var(--awb-icon-size, 20px); height: var(--awb-icon-size, 20px);
	padding: 0; transition: transform .2s ease; }
#main .fusion-accordian .panel-title a i.fa-fusion-box::before { content: none; }
#main .fusion-accordian .panel-title a.active i.fa-fusion-box { transform: rotate(180deg); }
#main .fusion-accordian .panel-title a:hover i.fa-fusion-box { background-color: var(--rt-orange-dark) !important; }
#main .fusion-accordian .panel-title a:hover .fusion-toggle-heading { color: var(--rt-orange-dark); }

/* ====== Footer (v2.6) ====== */
.rt-foot-line { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 24px 0; max-width: 360px; }
.rt-foot-brand p { color: var(--rt-haiti); font-size: 15px; line-height: 1.6; }
.rt-foot-brand a { text-decoration: underline; }
.rt-foot-h { font: 600 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 12px; }
.rt-footcol a { display: block; color: var(--rt-haiti); font: 400 15px/1.5 'Inter', sans-serif; padding: 5px 0; text-decoration: none; }
.rt-footcol a:hover { color: var(--rt-orange-dark); }
.rt-foot-legal { font-size: 14px; margin: 0; color: var(--rt-haiti); }
.rt-foot-legal-right { text-align: right; }
.rt-foot-legal-right a { margin-left: 24px; text-decoration: underline; }
@media (max-width: 800px) {
	.rt-foot-legal, .rt-foot-legal-right { text-align: left; }
	.rt-foot-legal-right a { margin: 0 24px 0 0; }
}

/* ====== Workshops hub (v1.0) ====== */
/* Event card: photo w/ date badge, coloured body, bullet list, button */
.rt-event { position: relative; overflow: hidden; height: 100%; }
/* The corner class sits on the column, but Avada insets the wrapper by the
   gutter margin, so the radius was being drawn ~11px outside the visible card
   and the wrapper's square corner showed through it. The wrapper inherits the
   radius and does the clipping instead. */
#main .rt-event > .fusion-column-wrapper {
  padding: 0; height: 100%; display: flex; flex-direction: column;
  border-radius: inherit; overflow: hidden; }
.rt-event-photo { position: relative; }
.rt-event-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rt-event-badge { position: absolute; top: 0; right: 24px; padding: 12px 16px; text-align: center; font-family: 'Inter', sans-serif; color: #FFFFFF; z-index: 2; }
.rt-event-badge .d { font-weight: 700; font-size: 18px; line-height: 1.2; display: block; }
.rt-event-badge .m { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; display: block; margin-top: 2px; }
.rt-event-body { padding: 28px; flex: 1 0 auto; }
.rt-event-meta { display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 'Inter', sans-serif; color: #FFFFFF; margin: 0 0 12px; }
#main .rt-event-body h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.25; color: #FFFFFF !important; margin: 0 0 10px; }
.rt-event-loc { font: 400 14px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.8); margin: 0 0 16px; }
.rt-event-body ul { margin: 0 0 24px; padding-left: 18px; }
.rt-event-body li { font: 400 14px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.9); margin-bottom: 8px; }
.rt-event-btn { display: inline-block; background: var(--rt-orange); color: var(--rt-haiti-dark); font: 500 16px/1.5 'Inter', sans-serif; padding: 10px 24px; border-radius: var(--rt-radius-btn); text-decoration: none; transition: background .15s, color .15s; }
/* Primary hover darkens the orange rather than flipping to navy, matching
   .rt-nav-cta and the comparison table CTA. */
.rt-event-btn:hover { background: var(--rt-orange-dark); color: var(--rt-haiti-dark); }
/* colour variants */
/* Figma 12513-6916: both event cards are peri-darker with an orange button.
   The pair is distinguished by the mirrored corner, not by colour. */
#main .rt-event > .fusion-column-wrapper { background: var(--rt-peri-darker); }
.rt-event .rt-event-badge { background: var(--rt-peri-darker); }
/* Eligibility panels */
#main .rt-elig > .fusion-column-wrapper { padding: 28px; height: 100%; }
#main .rt-elig-yes > .fusion-column-wrapper { background: #FFFFFF; border: 1px solid var(--rt-peri); }
#main .rt-elig-no > .fusion-column-wrapper { background: var(--rt-neutral-lightest); }
.rt-elig h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; color: var(--rt-haiti); margin: 12px 0 14px; }
.rt-elig ul { margin: 0; padding-left: 18px; }
.rt-elig li { font: 400 14px/1.6 'Inter', sans-serif; color: var(--rt-haiti); margin-bottom: 8px; }
.rt-elig-icon { width: 22px; height: 22px; display: block; }
/* Hero overlay card (photo with inset panel) */
/* Hub hero (Figma Header 88): a brand-coloured card sitting bottom-left over a
   full-bleed photo with a 40% scrim. The card takes the colour of the line the
   hub belongs to, so Training reads peri and Consulting reads orange. */
/* The hero photo is now the full-bleed section itself, so the 40% scrim sits on
   the container rather than on an inset column. */
.fusion-fullwidth.rt-herophoto { position: relative; }
.fusion-fullwidth.rt-herophoto::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 0; pointer-events: none; }
.fusion-fullwidth.rt-herophoto > .fusion-builder-row { position: relative; z-index: 1; }
/* Figma gives the band 800px. Avada containers ignore a min_height attribute,
   so it is set here and eased back on smaller screens. */
.fusion-fullwidth.rt-herophoto { min-height: 800px; display: flex; align-items: flex-end; }
/* The row carries Avada's site-width cap, so it must stay centred inside the
   full-bleed photo. Without the auto margins the card slides to the viewport
   edge and stops lining up with the logo as the screen gets wider. */
.fusion-fullwidth.rt-herophoto > .fusion-builder-row { width: 100%; margin-left: auto; margin-right: auto; }
/* The card is 560px in the design. Cap the wrapper, not the column: the column
   carries Avada's gutter margin, which is exactly what cancels the row's
   negative margin and puts the card's left edge on the container. */
.fusion-fullwidth.rt-herophoto .rt-herocard > .fusion-column-wrapper { max-width: 560px; }
/* The card caps at 560px per the design rather than filling the half column */
.fusion-fullwidth.rt-herophoto .fusion-layout-column { max-width: none; }
@media (max-width: 1024px) { .fusion-fullwidth.rt-herophoto { min-height: 620px; } }
@media (max-width: 640px)  { .fusion-fullwidth.rt-herophoto { min-height: 520px; }
  .fusion-fullwidth.rt-herophoto .fusion-layout-column { max-width: none; } }

/* ============================================================
   MEGA NAV (v1.1) — custom header: 3 mega panels + contact CTA
   Desktop: hover/click panels, Solutions has By Role / By Challenge tabs
   Mobile:  slide-in drawer with accordions
   Scroll:  hides on scroll down, floats back on scroll up
   ============================================================ */
/* The bar is WHITE and opaque (Figma 12516:15560). It no longer overlays the
   hero, so page content clears it via --rt-navh rather than sitting under it. */
:root { --rt-navh: 87px; --rt-nav-ink: #191919; --rt-nav-max: 1440px; --rt-nav-gutter: 60px; }

.rt-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #FFFFFF;
  border-bottom: 1px solid var(--rt-neutral-lighter, #D8D8D8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .32s cubic-bezier(.4,0,.2,1); transform: translateY(0); }
.rt-nav.is-hidden { transform: translateY(-100%); }

.rt-nav-bar { display: flex; align-items: center; gap: 16px; max-width: var(--rt-nav-max); margin: 0 auto; padding: 4px var(--rt-nav-gutter); }
.rt-nav-logo img { height: 72px; width: auto; display: block; }
/* Both rows stack to the right of the logo and share its full width */
.rt-nav-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Utility row: small links left, one pushed right */
.rt-nav-util { display: flex; align-items: center; gap: 24px; padding: 8px 0; }
.rt-nav-util a { font: 600 12px/1.5 'Inter', sans-serif; color: var(--rt-nav-ink); text-decoration: none; transition: color .15s; }
.rt-nav-util a:hover { color: var(--rt-orange-dark, #CC5800); }
.rt-nav-util a.right { margin-left: auto; }

.rt-nav-rule { height: 1px; background: var(--rt-neutral-lighter, #D8D8D8); }

/* Main row */
.rt-nav-main { display: flex; align-items: center; justify-content: space-between; }
.rt-nav-links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.rt-nav-links > li { position: relative; }
.rt-nav-trigger { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
  font: 600 16px/1.5 'Inter', sans-serif; color: var(--rt-nav-ink); padding: 8px 0 12px; position: relative; }
.rt-nav-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rt-orange); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.rt-nav-trigger:hover::after,
.rt-nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* Orange fill, haiti label — the decided primary button */
.rt-nav-cta { display: inline-block; background: var(--rt-orange); border: 1px solid var(--rt-orange);
  color: var(--rt-haiti-dark, #080F22); font: 600 16px/1.5 'Inter', sans-serif; padding: 4px 20px;
  border-radius: var(--rt-radius-btn); text-decoration: none; transition: background .18s, color .18s, border-color .18s; }
/* Primary hover darkens the orange rather than flipping to navy. */
.rt-nav-cta:hover { background: var(--rt-orange-dark); border-color: var(--rt-orange-dark); color: var(--rt-haiti-dark); }

/* Mega panel */
.rt-mega { position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; box-shadow: 0 24px 40px -12px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.rt-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Same container as .rt-nav-bar: first column aligns to the logo, rail aligns to the CTA */
.rt-mega-inner { max-width: var(--rt-nav-max); margin: 0 auto; padding: 40px var(--rt-nav-gutter) 48px; }
.rt-mega-split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
/* No rail (About): the columns keep their width instead of stretching across
   the space the rail would have taken. */
.rt-mega-split:not(.has-rail).cols-2 { grid-template-columns: 1fr 1fr 380px; }
/* Four link columns: the Training tabs, since the promo rail became a plain
   Browse column (Rhys, 11 Sept 2026). Gap tightens from 48px so four columns
   still breathe inside the same container width as the bar above them. */
.rt-mega-split:not(.has-rail).cols-4 { grid-template-columns: repeat(4, 1fr); gap: 40px; }
/* The rail is always the final track. Column count varies by panel (tabbed
   panels run 3 link columns, plain ones run 2), so it is declared explicitly
   rather than left to wrap onto a second row. */
.rt-mega-split.has-rail { grid-template-columns: 1fr 1fr 380px; gap: 56px; align-items: start; }
.rt-mega-split.has-rail.cols-3 { grid-template-columns: 1fr 1fr 1fr 340px; gap: 40px; }
/* One link column: keep it a readable width and pin the rail right, rather
   than letting it fall into the middle track. */
.rt-mega-split.has-rail.cols-1 { grid-template-columns: minmax(0, 520px) 1fr 380px; }
.rt-mega-split.has-rail.cols-1 > .rt-mega-rail { grid-column: 3; }
.rt-mega-cat { font: 600 12px/1.4 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-neutral); margin: 0 0 20px; }
.rt-mega-link { display: block; text-decoration: none; margin-bottom: 22px; }
.rt-mega-link .t { display: block; font: 700 18px/1.35 'Inter', sans-serif; color: var(--rt-haiti); transition: color .15s; }
.rt-mega-link .d { display: block; font: 400 14px/1.45 'Inter', sans-serif; color: var(--rt-haiti-light); margin-top: 3px; }
.rt-mega-link:hover .t { color: var(--rt-orange-dark); }

/* Solutions tabs */
.rt-mega-tabs { display: flex; gap: 28px; border-bottom: 1px solid rgba(0,0,0,.12); margin-bottom: 32px; }
.rt-mega-tab { background: none; border: 0; cursor: pointer; padding: 0 0 12px; font: 600 17px/1.4 'Inter', sans-serif; color: var(--rt-haiti-light); position: relative; }
.rt-mega-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rt-orange); transform: scaleX(0); transition: transform .2s ease; }
.rt-mega-tab[aria-selected="true"] { color: var(--rt-haiti); }
.rt-mega-tab[aria-selected="true"]::after { transform: scaleX(1); }
.rt-mega-tabpanel[hidden] { display: none; }

/* Right-hand rails */
.rt-mega-rail { background: var(--rt-neutral-lightest); border-radius: 2px; padding: 28px; }
/* Each panel's rail carries its own line colour: Training on dark peri,
   Consulting on dark orange, everything else on ink. Rail links are white on
   every ground. */
.rt-mega-rail.dark { background: var(--rt-haiti-dark); }
.rt-mega[data-mega="training"] .rt-mega-rail.dark { background: var(--rt-peri-darker); }
.rt-mega[data-mega="consulting"] .rt-mega-rail.dark { background: var(--rt-orange-dark); }

.rt-mega-rail.dark h4 { color: #FFFFFF; font: 700 20px/1.3 'Inter', sans-serif; margin: 0 0 8px; }
.rt-mega-rail.dark p { color: rgba(255,255,255,.82); font: 400 14px/1.5 'Inter', sans-serif; margin: 0 0 18px; }
.rt-mega-rail.dark a { color: var(--rt-white); font: 600 14px/1.4 'Inter', sans-serif; text-decoration: none; }
.rt-mega-guide { display: flex; gap: 14px; align-items: center; text-decoration: none; margin-bottom: 16px; }
.rt-mega-guide img { width: 84px; height: 60px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.rt-mega-guide span { font: 600 15px/1.35 'Inter', sans-serif; color: var(--rt-haiti); }
.rt-mega-guide:hover span { color: var(--rt-orange-dark); }

/* Mobile drawer */
.rt-nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.rt-nav-burger span { display: block; width: 24px; height: 2px; background: var(--rt-nav-ink); margin: 5px 0; transition: transform .2s, opacity .2s; }
.rt-nav.is-drawer .rt-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rt-nav.is-drawer .rt-nav-burger span:nth-child(2) { opacity: 0; }
.rt-nav.is-drawer .rt-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rt-drawer { position: fixed; inset: 0; top: var(--rt-navh); background: #FFFFFF; overflow-y: auto; padding: 24px 24px 64px;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 999; }
.rt-drawer.is-open { transform: translateX(0); }
.rt-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--rt-neutral-lighter, #D8D8D8); cursor: pointer; padding: 18px 0; font: 600 20px/1.3 'Inter', sans-serif; color: var(--rt-nav-ink); }
.rt-acc-trigger .chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.rt-acc-trigger[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.rt-acc-panel { padding: 8px 0 20px; }
.rt-acc-panel[hidden] { display: none; }
.rt-acc-panel .rt-mega-cat { color: var(--rt-neutral); margin: 18px 0 12px; }
.rt-acc-panel .rt-mega-link .t { color: var(--rt-haiti); font-size: 16px; }
.rt-acc-panel .rt-mega-link .d { color: var(--rt-haiti-light); }
.rt-drawer .rt-nav-cta { display: block; text-align: center; margin-top: 28px; }
.rt-drawer-tabs { display: flex; gap: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--rt-neutral-lighter, #D8D8D8); }
.rt-drawer-tabs .rt-mega-tab { font-size: 15px; }
/* Stacked, not wrapped. As a wrapping row these four sat three-up with Contact
   orphaned on its own line, which read as a mistake rather than a list. */
.rt-drawer-util { display: flex; flex-direction: column; padding: 10px 0 4px;
  border-top: 1px solid var(--rt-neutral-lighter, #D8D8D8); margin-top: 20px; }
/* Same treatment as a sub-menu heading inside an accordion ("About Recruiting
   Toolbox"), so the drawer has two text levels rather than three. Padding gives
   each one a full-width tap target. */
.rt-drawer-util a { font: 700 16px/1.35 'Inter', sans-serif; color: var(--rt-haiti);
  text-decoration: none; padding: 13px 0; }
/* Only doubles up when the last accordion is closed: its own bottom border then
   sits directly above this one. Open, the border is needed to close the panel. */
.rt-acc-panel[hidden] + .rt-drawer-util { border-top: 0; margin-top: 8px; }

@media (max-width: 1024px) {
  .rt-nav-stack { display: none; }
  .rt-nav-burger { display: block; margin-left: auto; }
  :root { --rt-nav-gutter: 20px; }
  .rt-nav-bar { padding: 8px var(--rt-nav-gutter); }
  .rt-nav-logo img { height: 56px; }
  :root { --rt-navh: 72px; }
}
@media (min-width: 1025px) { .rt-drawer { display: none; } }

/* Page content clears the fixed nav */
body.rt-has-meganav .fusion-tb-header { display: none !important; }

/* WordPress admin bar must not clip the fixed nav (logged-in views only) */
body.admin-bar .rt-nav { top: 32px; }
body.admin-bar .rt-drawer { top: 106px; }
@media screen and (max-width: 782px) {
  body.admin-bar .rt-nav { top: 46px; }
  body.admin-bar .rt-drawer { top: 120px; }
}
/* Section nav bar must match the main nav height exactly (Avada adds 20px column margins) */
.rt-secnav-wrap .fusion-layout-column { margin-top: 0 !important; margin-bottom: 0 !important; }
.rt-secnav-wrap .fusion-builder-row { padding: 0 !important; }


/* ============================================================
   COMPARISON TABLE  (Figma 12514:15210 "Comparisson table")
   Semantic <table> so it stays readable, sortable by assistive tech and
   editable in the builder's text editor.

   Mobile (<=768px) is the hard part of any 3-column comparison. Rather than
   scrolling sideways — which hides the comparison, i.e. the entire point —
   each row collapses to a block: the feature on its own line, then the two
   verdicts side by side beneath it, each labelled from data-col. The reader
   can still compare at 320px.
   ============================================================ */
.rt-cmp-wrap { width: 100%; max-width: 100%; }
/* #main prefix: Avada ships its own .fusion-text table styling (widths, borders,
   cell padding) that otherwise forces a min-width and breaks the mobile stack. */
#main .rt-cmp { width: 100%; max-width: 100%; border-collapse: collapse; border: 0;
  table-layout: fixed; font-family: 'Inter', sans-serif; margin: 0; }
#main .rt-cmp th, #main .rt-cmp td { text-align: left; border: 0; background: none;
  box-sizing: border-box; overflow-wrap: break-word; }
#main .rt-cmp tr { border: 0; }

/* Column heads */
.rt-cmp thead th { padding: 0 24px 24px; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.4; letter-spacing: -.22px; color: var(--rt-haiti); text-align: center; }
.rt-cmp thead th:first-child { width: 34%; }
.rt-cmp thead th.rt-cmp-us { color: var(--rt-haiti); }

/* Category band */
.rt-cmp .rt-cmp-cat th { padding: 32px 0 20px; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.4; letter-spacing: -.22px; color: var(--rt-haiti); text-align: left; }

/* Body rows: zebra per the design */
.rt-cmp tbody td { padding: 16px 24px; font-size: 16px; line-height: 1.5; color: var(--rt-haiti); vertical-align: middle; }
.rt-cmp tbody td + td { text-align: center; font-weight: 600; }
.rt-cmp tbody tr.alt td { background: var(--rt-neutral-lightest); }

/* Verdict marks. The tick is the exported Figma asset, inlined so it cannot 404. */
.rt-cmp .yes, .rt-cmp .no { display: inline-block; width: 24px; height: 24px; }
.rt-cmp .yes { background: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22check%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M19.0634%206.79785C19.1626%206.79788%2019.2388%206.82834%2019.3173%206.90723C19.3958%206.98627%2019.4266%207.06364%2019.4266%207.16504C19.4266%207.26621%2019.3964%207.34439%2019.3182%207.42383L9.70007%2017.0352C9.61788%2017.1167%209.54189%2017.1455%209.4491%2017.1455C9.35646%2017.1455%209.28135%2017.1173%209.20105%2017.0371L4.66589%2012.502C4.58892%2012.4238%204.56085%2012.3493%204.56335%2012.252C4.56619%2012.1459%204.60093%2012.0636%204.6825%2011.9824C4.76156%2011.9038%204.8389%2011.8731%204.94031%2011.873C5.01673%2011.873%205.0799%2011.8905%205.1405%2011.9326L5.20105%2011.9834L9.09558%2015.8965L9.4491%2016.252L9.80359%2015.8975L18.7958%206.91113C18.8808%206.82853%2018.9626%206.79785%2019.0634%206.79785Z%22%20fill%3D%22%230D1A42%22%20stroke%3D%22%230D1A42%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E") center/24px 24px no-repeat; }
.rt-cmp .no { position: relative; }
.rt-cmp .no::before { content: ""; position: absolute; left: 4px; right: 4px; top: 11px;
  height: 2px; background: var(--rt-neutral-light); }
.rt-cmp .yes::after, .rt-cmp .no::after { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.rt-cmp .yes::after { content: "Included"; }
.rt-cmp .no::after { content: "Not included"; }

/* Footer action sits under the RT column only */
.rt-cmp tfoot td { padding: 32px 24px 0; }
.rt-cmp tfoot .rt-cmp-cta { display: inline-block; width: 100%; text-align: center; background: var(--rt-orange);
  border: 1px solid var(--rt-orange); color: var(--rt-haiti-dark); font-weight: 500; font-size: 16px;
  line-height: 1.5; padding: 10px 24px; border-radius: var(--rt-radius-btn); text-decoration: none;
  transition: background .18s, color .18s, border-color .18s; }
.rt-cmp tfoot .rt-cmp-cta:hover { background: var(--rt-orange-dark); border-color: var(--rt-orange-dark); color: var(--rt-haiti-dark); }

@media (max-width: 768px) {
  .rt-cmp, .rt-cmp thead, .rt-cmp tbody, .rt-cmp tfoot, .rt-cmp tr, .rt-cmp th, .rt-cmp td { display: block; }
  /* The column heads are re-stated per cell below, so the real thead is only
     needed by screen readers. */
  .rt-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #main .rt-cmp .rt-cmp-cat th { display: block; width: 100%; padding: 28px 0 12px; font-size: 20px; }
  .rt-cmp tbody tr { padding: 14px 0; border-bottom: 1px solid var(--rt-neutral-lighter); }
  .rt-cmp tbody tr.alt td { background: none; }
  .rt-cmp tbody tr.alt { background: var(--rt-neutral-lightest); }
  /* Flex, not inline-block: two 50% inline-blocks plus the whitespace between
     them in the markup exceeds 100% and wraps, which stacks the pair and
     destroys the comparison. Flex has no whitespace and no rounding problem. */
  #main .rt-cmp tbody tr { display: flex; flex-wrap: wrap; }
  #main .rt-cmp tbody td:first-child { flex: 0 0 100%; width: 100%; padding: 0 16px 12px; font-weight: 600; }
  #main .rt-cmp tbody td + td { flex: 1 1 0; width: auto; min-width: 0; text-align: left;
    padding: 0 16px; font-weight: 600; }
  /* Fixed two-line box: "Recruiting Toolbox" wraps and "Other training" does
     not, which would otherwise leave the two verdict marks on different lines. */
  #main .rt-cmp tbody td + td::before { content: attr(data-col); display: block; min-height: 2.5em;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rt-haiti-light); margin-bottom: 4px; }
  .rt-cmp tfoot td { padding: 24px 16px 0; }
  .rt-cmp tfoot td:empty { display: none; }
}

/* Programs / services grid: pin the column count.
   Avada's own .fusion-grid-3 rule was resolving to two-up on these pages, so the
   track count is set explicitly here rather than left to its computed width. */

/* Carbon icons: inline SVG painted with currentColor, so an icon takes the
   colour of the text around it. Size via the shortcode's size attribute. */
.rt-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* Problem link-cards (Figma Layout 484): the action is a LINK with a chevron,
   not a filled button. The whole column is already the link, so this is a styled
   span rather than a nested <a> - one click target, valid markup. */
#main .rt-linkcard .rt-plink {
  display: inline-block; margin-top: 4px; padding: 0;
  font: 500 15px/1.5 'Inter', sans-serif; color: var(--rt-haiti);
  border: 0; background: none; transition: color .18s ease;
}
#main .rt-linkcard .rt-plink::after { content: " \203A"; }
#main .rt-linkcard:hover .rt-plink { background: none; color: var(--rt-haiti); text-decoration: underline; }

/* Card icons follow the card. At rest they carry the card's brand colour; on
   hover the card floods with that colour and the icon flips to the same ink as
   the text, because Carbon icons paint with currentColor. */
#main .rt-linkcard .rt-cardicon { display: block; margin-bottom: 14px; transition: color .18s ease; }

/* Testimonial cards (native Post Cards over rt_testimonial).
   Left aligned throughout, no photo: the company sits where a logo goes, then
   the quote, then the role. Swap .rt-tcompany for an Image element once the
   client logos are attached as featured images. */
#main .rt-tcards .rt-tcard > .fusion-column-wrapper {
  background: var(--rt-neutral-lightest); border: 1px solid rgba(0,0,0,.08);
  border-radius: 2px; padding: 32px; height: 100%;
  display: flex; flex-direction: column; text-align: left;
}
#main .rt-tcards .rt-tcompany, #main .rt-tcards .rt-tcompany h4 {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rt-haiti-light); margin: 0 0 20px;
}
#main .rt-tcards .fusion-content-tb {
  font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.35;
  color: var(--rt-haiti); flex: 1 0 auto;
}
#main .rt-tcards .fusion-content-tb p { margin: 0; }
#main .rt-tcards .fusion-content-tb p::before { content: "\201C"; }
#main .rt-tcards .fusion-content-tb p::after  { content: "\201D"; }
#main .rt-tcards .rt-trole, #main .rt-tcards .rt-trole h5 {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.4;
  color: var(--rt-haiti-light); margin: 24px 0 0;
}
/* Equal-height cards across the carousel, and Avada's Swiper arrows moved off
   the cards to sit below-right. Avada uses Swiper here (awb-swiper), and its
   wrapper carries fusion-flex-align-items-flex-start, which is what leaves the
   slides ragged. The arrows are injected by JS and use Avada's own
   awb-swiper-button naming, not Swiper's defaults, so they are invisible in the
   served HTML and have to be read from the live DOM. */
#main .rt-tcards .swiper-wrapper { align-items: stretch !important; }
#main .rt-tcards .swiper-slide { height: auto !important; display: flex; }
#main .rt-tcards .swiper-slide > .fusion-column-wrapper { height: 100%; width: 100%; }

/* Carousel arrows. Avada paints these entirely from CSS custom properties
   (assets/css/shortcodes/swiper.css), so a variant is a matter of redefining the
   vars rather than fighting the rules, exactly like the button variants above.
   They must stay INSIDE the carousel: the swiper container clips overflow, so
   moving them below the track leaves a correctly sized element painting nothing. */
#main .rt-tcards {
  --awb-arrow-box-width: 48px;
  --awb-arrow-box-height: 48px;
  --awb-arrow-size: 16px;
  --awb-arrow-bgcolor: #FFFFFF;
  --awb-arrow-color: var(--rt-haiti);
  --awb-arrow-hover-bgcolor: var(--rt-haiti);
  --awb-arrow-hover-color: #FFFFFF;
  --awb-arrow-border-radius-top-left: 8px;
  --awb-arrow-border-radius-top-right: 8px;
  --awb-arrow-border-radius-bottom-right: 8px;
  --awb-arrow-border-radius-bottom-left: 8px;
}
#main .rt-tcards .awb-swiper-button { opacity: 1; box-shadow: 0 2px 10px rgba(13,26,66,.14); }
/* Inset the track so the arrows sit in a gutter rather than over the outer
   cards. They cannot simply be pushed outward: the swiper clips overflow. */
#main .rt-tcards { padding-left: 64px; padding-right: 64px; }
#main .rt-tcards .awb-swiper-button-prev { left: 0; }
#main .rt-tcards .awb-swiper-button-next { right: 0; }
/* Company logo on a testimonial card. The logo is the post's featured image, so
   adding one is the normal WordPress flow. When a testimonial has no logo yet
   the company name shows instead, so a card is never blank at the top. */
#main .rt-tcards .rt-tlogo { display: block; margin-bottom: 24px; }
/* Every logo gets the SAME box and is contained within it, rather than a fixed
   height: the aspect ratios vary enormously (PepsiCo is 7:1, Starbucks is
   square), so a fixed height alone would leave them wildly inconsistent. */
#main .rt-tcards .rt-tlogo img { height: 56px !important; width: 200px !important; max-width: 100%;
  object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .9; display: block; }
#main .rt-tcards .rt-tcard:has(.rt-tlogo img) .rt-tcompany { display: none; }
#main .rt-tcards .rt-tlogo:not(:has(img)) { display: none; }

/* John quote band (Figma Layout 192): his photo left, his quote right, on the
   peri-darker ground. The photo runs taller than the Figma's 410px. */
#main .rt-johnphoto .fusion-imageframe { display: block; width: 100%; }
#main .rt-johnphoto img { display: block; width: 100%; height: 520px; object-fit: cover; object-position: center top;
  border-radius: 4px 4px 4px 96px; }
@media (max-width: 1024px) { #main .rt-johnphoto img { height: 380px; } }
@media (max-width: 640px)  { #main .rt-johnphoto img { height: 280px; } }

/* --------------------------------------------------------------------------
   Strategy session band  (John, 6 Sept: "Throughout the site, I'd like to have
   some 'Schedule a strategy session' widget we can place in different places",
   referencing the get-a-free-quote block on the Avada marketing-consultant demo)

   Saved to the Avada Library as "RT Strategy Session Band" so it can be dropped
   onto any page without rebuilding it. Peri-darker ground, because orange is
   already carrying the training/consulting split and a third accent would make
   the page shout. Headline left, qualifier and button right.
   -------------------------------------------------------------------------- */
#main .rt-ssband { background: var(--rt-peri-darker); }
#main .rt-ssband .fusion-layout-column { margin: 0 !important; }
#main .rt-ssband h2 { color: #FFF; margin: 0 0 12px; }
#main .rt-ssband p { color: rgba(255,255,255,.86); font-size: 18px; margin: 0; max-width: 52ch; }
/* Avada makes .fusion-column-wrapper the flex parent, in row direction, so the
   button and the note land side by side. Stack them on the wrapper, not on
   the column, or the note sits next to the button instead of under it. */
#main .rt-ssband .rt-ss-actions > .fusion-column-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 1025px) {
  #main .rt-ssband .rt-ss-actions > .fusion-column-wrapper { align-items: flex-end; }
  #main .rt-ssband .rt-ss-actions { text-align: right; }
}
#main .rt-ssband .rt-ss-note { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.5;
  max-width: 30ch; margin: 0; text-align: left; text-wrap: balance; }
/* Avada centres text inside the column, so the note needs telling twice. */
@media (min-width: 1025px) { #main .rt-ssband .rt-ss-note { text-align: right; } }

/* Qualifier panel on the strategy session page. John's own wording:
   "Before we capture info, confirm: To qualify: Director+ level corporate TA
   leader with 10+ person TA team." Stated plainly rather than gating the form,
   so an unqualified visitor self-selects out instead of hitting an error. */
#main .rt-qualify { background: var(--rt-mist); border-radius: 4px; padding: 28px 32px; }
#main .rt-qualify h3 { margin: 0 0 14px; font-size: 20px; }
#main .rt-qualify ul { margin: 0; padding-left: 20px; }
#main .rt-qualify li { margin-bottom: 9px; font-size: 16px; line-height: 1.55; color: var(--rt-haiti-light); }
#main .rt-qualify li::marker { color: var(--rt-orange); }
#main .rt-qualify li b { color: var(--rt-haiti); font-weight: 600; }
#main .rt-qualify p { margin: 14px 0 0; font-size: 14px; color: var(--rt-haiti-light); }

/* --------------------------------------------------------------------------
   Comparison table, restyle v2  (John, 6 Sept: "I don't love this side by side
   - too much white space, I'd like more of a table or designed look to this.
   Maybe some shaded cells or ??? ... maybe something more like [the Avada
   pricing table] design, but built more for row-based comparison?")

   The markup was already a real table, so this is presentation only. Three
   changes: the Recruiting Toolbox column becomes a continuous highlighted
   column with a frame, the way a pricing table treats its featured plan; every
   row gets a rule so the eye can track across; and the vertical rhythm tightens
   so the block reads as a table rather than a list floating in white.

   Scoped to >768px so the existing stacked-card mobile treatment below is
   untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  /* frame the whole thing, so it reads as one object */
  #main .rt-cmp { border: 1px solid var(--rt-haiti-lightest); border-radius: 6px; overflow: hidden;
    background: #FFF; }

  #main .rt-cmp thead th { padding: 20px 24px; background: var(--rt-mist);
    border-bottom: 1px solid var(--rt-haiti-lightest); font-size: 15px; letter-spacing: .01em;
    vertical-align: bottom; }
  #main .rt-cmp thead th:first-child { width: 46%; }

  /* the featured column: continuous peri wash, framed both sides, top to bottom */
  #main .rt-cmp thead th.rt-cmp-us { background: var(--rt-peri-darker); color: #FFF;
    border-left: 1px solid var(--rt-peri-darker); border-right: 1px solid var(--rt-peri-darker); }
  #main .rt-cmp tbody td:nth-child(2) { background: rgba(43,75,209,.06);
    border-left: 1px solid rgba(43,75,209,.18); border-right: 1px solid rgba(43,75,209,.18); }
  #main .rt-cmp tbody tr:last-child td:nth-child(2) { border-bottom: 1px solid rgba(43,75,209,.18); }

  /* category bands: a real header row, not a gap */
  #main .rt-cmp .rt-cmp-cat th { padding: 14px 24px; background: var(--rt-haiti);
    color: #FFF; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

  /* rows: rules instead of relying on striping alone, and a tighter rhythm */
  #main .rt-cmp tbody td { padding: 13px 24px; border-bottom: 1px solid var(--rt-haiti-lightest); }
  #main .rt-cmp tbody tr.alt td { background: #FAFBFD; }
  #main .rt-cmp tbody tr.alt td:nth-child(2) { background: rgba(43,75,209,.10); }
  #main .rt-cmp tbody tr:hover td { background: var(--rt-orange-lightest); }
  #main .rt-cmp tbody tr:hover td:nth-child(2) { background: rgba(43,75,209,.14); }

  /* the check mark sits on a tinted ground now, so give it the brand blue */
  #main .rt-cmp tbody td:nth-child(2) .yes { filter: none; }

  #main .rt-cmp tfoot td { padding: 24px; border-bottom: 0; }
  #main .rt-cmp tfoot td:nth-child(2) { background: rgba(43,75,209,.06); }
}

/* A bar item that is a plain link rather than a panel trigger (Insights).
   It reuses .rt-nav-trigger for type and the orange underline, so it only needs
   the anchor defaults stripping back to match the buttons around it. */
#main .rt-nav-plain, .rt-nav-plain { text-decoration: none; color: inherit; }
.rt-nav-plain:hover { color: inherit; }
.rt-drawer .rt-acc-plain { text-decoration: none; display: block; }

/* --------------------------------------------------------------------------
   Problem cards, v2  (John, 6 Sept: "I love the idea of leading to the problems
   and the 4 small boxes - but my concerns is the type is small, and the product
   offering is just a small text link ... Maybe the problem bolded, a bit bigger,
   some text, and then a little product box below")

   The section keeps its job: problem first, product second. What changes is
   weight. The heading gets bigger and heavier, and the product stops being a
   text link and becomes a bordered box pinned to the bottom of the card, so the
   four line up regardless of how long each body runs.

   Editing stays in one place: the heading, the body and the product name are
   all plain text in the card's single Text element, and the destination is the
   column's own Link field. Nothing here needs the HTML touching to change copy.
   -------------------------------------------------------------------------- */
#main .rt-linkcard h3 { font-size: 30px; font-weight: 700; line-height: 1.22; letter-spacing: -.015em; margin: 0 0 14px; }
#main .rt-linkcard p { font-size: 15px; line-height: 1.6; margin: 0 0 20px; }

/* let the text block fill the card so the product box can sit on the floor */
#main .rt-linkcard > .fusion-column-wrapper > .fusion-text {
  display: flex; flex-direction: column; flex: 1 1 auto; }

/* Sized to its label, not to the card. Pinned to the card floor by margin-top:auto
   and held off the right edge by align-self, so the three still line up along the
   bottom without stretching into full-width bars.
   The right padding is deliberately larger than the left: it is the runway the
   chevron slides into on hover. */
#main .rt-linkcard .rt-cardcta {
  margin: auto 0 0; align-self: flex-start; width: auto;
  padding: 12px 24px 12px 18px;
  border: 1px solid transparent; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s ease, background .18s ease;
}
#main .rt-linkcard .rt-cardname {
  font: 600 15px/1.35 'Inter', sans-serif; color: var(--rt-haiti); }
#main .rt-linkcard .rt-cardcta::after {
  content: "\203A"; font-size: 20px; line-height: 1; color: var(--rt-haiti-light); flex: 0 0 auto; }

/* the card floods with its brand colour on hover; keep the box readable and
   let it pick up the accent so it reads as the thing you are about to click */


/* When the sub-brand logos arrive, an Avada Image element dropped into the box
   picks this up: logo left, name right, no markup change needed. */
#main .rt-linkcard .rt-cardcta img { height: 22px; width: auto; flex: 0 0 auto; }

@media (max-width: 1024px) { #main .rt-linkcard h3 { font-size: 25px; } }

/* ==========================================================================
   ARTICLE TEMPLATE  (Figma 12513-8948)
   Renders every post at /resources/[slug]/ through the RT Article Layout.

   The whole point of this block: the publisher writes a normal WordPress post
   and it comes out looking like the design. Everything below styles NATIVE
   editor output, so nobody has to touch HTML or the builder to publish.

     Heading 2 in the editor  -> the 44px italic section head
     Heading 3                -> the 36px section head
     A paragraph set entirely in bold -> the 22px lead paragraph
     Image block with a caption       -> full-width image + ruled caption
     Quote block                      -> the ruled pull quote
     Lists                            -> spaced to match body copy

   Type scale is Figma's, exactly: heading-2 52, heading-3 44, heading-4 36,
   heading-6 22, text-regular 16, text-small 14.
   ========================================================================== */

/* --- hero band ---------------------------------------------------------- */
#main .rt-arthero { background: var(--rt-peri-darker); }
#main .rt-artcrumb { font: 400 16px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.85); margin: 0 0 20px; }
#main .rt-artcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
#main .rt-artcrumb a:hover { color: #FFF; text-decoration: underline; }
#main .rt-artcrumb .sep { margin: 0 10px; opacity: .6; }
#main .rt-arthero h1 { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 52px;
  line-height: 1.2; letter-spacing: -1.04px; color: #FFF; margin: 0; }
#main .rt-artmeta { font: 400 18px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.85); margin: 28px 0 0; }
#main .rt-artmeta .dot { margin: 0 10px; opacity: .6; }
#main .rt-artmeta .read { font-size: 14px; }
@media (max-width: 1024px) { #main .rt-arthero h1 { font-size: 40px; letter-spacing: -.8px; } }
@media (max-width: 640px)  { #main .rt-arthero h1 { font-size: 32px; letter-spacing: -.6px; } }

/* Featured image straddles the blue band and the white below it, same device
   as the program hero: the split lives on the container, not the image. */
#main .rt-artsplit { background: linear-gradient(to bottom, var(--rt-peri-darker) var(--rt-artsplit, 34%), #FFFFFF var(--rt-artsplit, 34%)); }
#main .rt-artimg img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* --- article body ------------------------------------------------------- */
#main .rt-article { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); }
#main .rt-article > *:first-child { margin-top: 0; }
#main .rt-article p { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 20px; }

#main .rt-article h2 { font-family: 'Archivo', sans-serif; font-weight: 600; font-style: italic;
  font-size: 44px; line-height: 1.2; letter-spacing: -.44px; color: var(--rt-haiti); margin: 56px 0 24px; }
#main .rt-article h3 { font-family: 'Archivo', sans-serif; font-weight: 600; font-style: normal;
  font-size: 36px; line-height: 1.2; letter-spacing: -.36px; color: var(--rt-haiti); margin: 48px 0 20px; }
#main .rt-article h4 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 28px;
  line-height: 1.25; letter-spacing: -.28px; color: var(--rt-haiti); margin: 40px 0 16px; }
@media (max-width: 640px) {
  #main .rt-article h2 { font-size: 32px; }
  #main .rt-article h3 { font-size: 26px; }
  #main .rt-article h4 { font-size: 22px; }
}

/* A paragraph the publisher has set entirely in bold becomes the lead. No
   class to remember, no HTML: select the paragraph, press bold. */
#main .rt-article p:has(> strong:only-child) {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.4;
  letter-spacing: -.22px; margin: 40px 0 24px; }
#main .rt-article p:has(> strong:only-child) strong { font-weight: 700; }

#main .rt-article blockquote { margin: 40px 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--rt-neutral-lighter); }
#main .rt-article blockquote p { font: italic 400 20px/28px 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 12px; }
#main .rt-article blockquote p:last-child, #main .rt-article blockquote cite { margin-bottom: 0; }
#main .rt-article blockquote cite { display: block; font: 400 14px/1.5 'Inter', sans-serif; font-style: normal; color: var(--rt-haiti-light); }

#main .rt-article figure { margin: 40px 0; }
#main .rt-article figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
#main .rt-article figcaption { margin: 14px 0 0; padding-left: 16px; border-left: 2px solid var(--rt-neutral-lighter);
  font: 400 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); }

#main .rt-article ul, #main .rt-article ol { margin: 0 0 20px; padding-left: 22px; }
#main .rt-article li { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin-bottom: 10px; }
#main .rt-article li::marker { color: var(--rt-orange); }
#main .rt-article a { color: var(--rt-orange-dark); text-decoration: underline; }
#main .rt-article img { max-width: 100%; height: auto; }

/* --- share + tags ------------------------------------------------------- */
#main .rt-artshare { border-top: 0; }
#main .rt-artshare h4, #main .rt-artshare .rt-sharelabel { font: 600 18px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 14px; }
.rt-sharerow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rt-sharelinks { display: flex; align-items: center; gap: 14px; }
.rt-sharelinks a { display: inline-flex; color: var(--rt-haiti); transition: color .15s ease; }
.rt-sharelinks a:hover { color: var(--rt-orange-dark); }
.rt-sharelinks svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.rt-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-tagrow a { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest);
  border: 1px solid var(--rt-neutral-lighter); border-radius: 3px; padding: 4px 12px; text-decoration: none; background: #FFF; }
.rt-tagrow a:hover { border-color: var(--rt-haiti); }
#main .rt-artrule { border-top: 1px solid var(--rt-neutral-lighter); }

/* --- article cards (related reading), Figma 12513-8948 ------------------- */
#main .rt-acards .fusion-post-cards-grid-column { display: flex; }
#main .rt-acard > .fusion-column-wrapper { display: flex; flex-direction: column; height: 100%; }
#main .rt-acard .rt-aimg img { border-radius: 4px; }
#main .rt-ameta { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.rt-apill { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest);
  border: 1px solid var(--rt-neutral-lighter); border-radius: 3px; padding: 3px 10px; background: #FFF; }
.rt-aread { font: 400 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); }
#main .rt-acard .rt-atitle h3 { font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -.02em; }
#main .rt-acard .fusion-content-tb { font: 400 15px/1.55 'Inter', sans-serif; color: var(--rt-haiti-light); margin-bottom: 16px; }
#main .rt-amore { margin-top: auto; }
#main .rt-amore span { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-neutral-darkest); }
#main .rt-amore span::after { content: " \203A"; }
#main .rt-acard:hover .rt-amore span { color: var(--rt-orange-dark); }
#main .rt-eyebrow p { font: 600 14px/1.5 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rt-haiti-light); margin: 0 0 10px; }

/* The article runs in a 768px measure (Figma 12513-8948). Avada columns have no
   max-width attribute, so it is set on the column wrapper and centred. Applies
   to the hero, the body, the share row and the rule so they all line up. */
#main .rt-article > .fusion-column-wrapper,
#main .rt-artnarrow > .fusion-column-wrapper { max-width: 768px; margin-left: auto; margin-right: auto; }

/* Avada paints a grey ground behind blockquote. The design is a rule only. */
#main .rt-article blockquote { background: none !important; border-radius: 0; }

/* The title element carries Avada's default ink; on the blue band it is white. */
#main .rt-arthero .fusion-title h1, #main .rt-arthero h1 { color: #FFFFFF !important; }

/* ==========================================================================
   INSIGHTS INDEX  (Figma 12513-8829)
   ========================================================================== */

/* --- featured post: image left, content right -------------------------- */
#main .rt-feat { position: relative; display: grid; grid-template-columns: 640px 1fr; gap: 48px; align-items: center; }
#main .rt-feat-title a { color: inherit; text-decoration: none; }
/* Stretch the title link over the whole block so the image is clickable too,
   without nesting block elements inside an anchor. */
#main .rt-feat-title a::after { content: ""; position: absolute; inset: 0; }
#main .rt-feat-img img { display: block; width: 100%; height: 420px; object-fit: cover; border-radius: 4px; }
#main .rt-feat-cat { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 0 0 10px; }
#main .rt-feat-title { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 36px; line-height: 1.2;
  letter-spacing: -.36px; color: var(--rt-haiti); margin: 0 0 14px; }
#main .rt-feat:hover .rt-feat-title { color: var(--rt-peri-darker); }
#main .rt-feat-ex { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 0 0 20px; }
#main .rt-feat-meta { font: 400 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 0; }
#main .rt-feat-meta .dot { margin: 0 10px; opacity: .6; }
@media (max-width: 1024px) { #main .rt-feat { grid-template-columns: 1fr; gap: 24px; }
  #main .rt-feat-img img { height: 300px; } #main .rt-feat-title { font-size: 28px; } }

/* --- topic pills: navigation, not filters ------------------------------ */
.rt-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-pill { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti); text-decoration: none;
  padding: 8px 16px; border: 1px solid transparent; border-radius: 3px; transition: background .15s ease, border-color .15s ease; }
.rt-pill:hover { background: var(--rt-neutral-lightest); }
.rt-pill.is-on { border-color: var(--rt-neutral-lighter); background: var(--rt-neutral-lightest); font-weight: 600; }

/* --- vertical insight card --------------------------------------------- */
#main .rt-icard > .fusion-column-wrapper { display: flex; flex-direction: column; height: 100%; }
#main .rt-icard .rt-iimg img { border-radius: 4px; }
#main .rt-icard .rt-icat p { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti); margin: 20px 0 8px; }
#main .rt-icard .rt-ititle h3 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 24px;
  line-height: 1.3; letter-spacing: -.02em; color: var(--rt-haiti); }
#main .rt-icard .fusion-content-tb { font: 400 15px/1.55 'Inter', sans-serif; color: var(--rt-haiti-light); margin-bottom: 16px; }
#main .rt-icard .rt-imeta { margin-top: auto; font: 400 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); }
#main .rt-icard .rt-imeta .dot { margin: 0 8px; opacity: .6; }

/* --- wide card: image left, content right ------------------------------ */
#main .rt-wide .rt-acard > .fusion-column-wrapper { display: grid; grid-template-columns: 280px 1fr;
  column-gap: 28px; row-gap: 0; align-content: center; align-items: start; height: 100%; }
#main .rt-wide .rt-acard .rt-aimg img { height: 100%; min-height: 240px; object-fit: cover; }
@media (max-width: 860px) { #main .rt-wide .rt-acard > .fusion-column-wrapper { grid-template-columns: 1fr; }
  #main .rt-wide .rt-acard .rt-aimg { grid-row: auto; }
  #main .rt-wide .rt-acard .rt-aimg img { min-height: 200px; } }

/* Outline button on a light ground (Figma 12513-8829, the "View all" on the
   Insights index). Follows the same token-override pattern as rt-btn-on-dark
   and rt-btn-white rather than fighting Avada's button CSS directly. */
.fusion-button.rt-btn-outline {
	--button_gradient_top_color: transparent;
	--button_gradient_bottom_color: transparent;
	--button_gradient_top_color_hover: var(--rt-neutral-lightest);
	--button_gradient_bottom_color_hover: var(--rt-neutral-lightest);
	--button_accent_color: var(--rt-haiti);
	--button_accent_hover_color: var(--rt-haiti);
	--button_border_color: var(--rt-neutral-lighter);
	--button_border_hover_color: var(--rt-haiti);
	--button_border_width-top: 1px; --button_border_width-right: 1px;
	--button_border_width-bottom: 1px; --button_border_width-left: 1px;
}
.fusion-button.rt-btn-outline { background-image: none; }

/* The wide card is one grid: image pinned down the left, everything else
   stacked in the right column. Children have to be placed explicitly, because
   auto-placement drops the first text element into its own full-width row above
   the image. */
#main .rt-wide .rt-acard > .fusion-column-wrapper > * { grid-column: 2; }
#main .rt-wide .rt-acard > .fusion-column-wrapper > .rt-aimg {
	grid-column: 1; grid-row: 1 / span 20; align-self: stretch; }

/* Cluster hub breadcrumb. Same shape as the article one, on a light ground. */
#main .rt-crumbline p { font: 400 16px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 0 0 18px; }
#main .rt-crumbline a { color: var(--rt-haiti-light); text-decoration: none; }
#main .rt-crumbline a:hover { color: var(--rt-orange-dark); text-decoration: underline; }
#main .rt-crumbline .sep { margin: 0 10px; opacity: .6; }

/* Nine pills wrap to a second row. Give the rows a little breathing space so
   the wrapped ones do not crowd the row above. */
.rt-pills { row-gap: 6px; }

/* ==========================================================================
   PODCAST
   ========================================================================== */

/* The browser's own audio element, restyled only as far as it can be. Chrome
   and Safari expose very little of the control chrome, so the frame around it
   does the work rather than trying to rebuild the player. */
#main .rt-player { margin: 20px 0 24px; }
#main .rt-player audio { display: block; width: 100%; height: 44px; border-radius: 4px; }
#main .rt-player iframe { display: block; width: 100%; border: 0; border-radius: 4px; }
#main .rt-player a { font: 500 15px/1.5 'Inter', sans-serif; color: var(--rt-orange-dark); }

/* Episode variant of the featured block: portrait artwork rather than a
   landscape photo, because podcast art is square. */
#main .rt-feat-ep { grid-template-columns: 420px 1fr; align-items: center; }
#main .rt-feat-ep .rt-feat-img img { height: 420px; object-fit: cover; }
@media (max-width: 1024px) { #main .rt-feat-ep { grid-template-columns: 1fr; }
  #main .rt-feat-ep .rt-feat-img img { height: 260px; } }

/* Episode card: the player sits under the excerpt, so the whole card cannot be
   one big link. The title carries the link and the player stays clickable. */
#main .rt-epcard > .fusion-column-wrapper { display: flex; flex-direction: column; height: 100%; }
#main .rt-epcard .rt-epimg img { border-radius: 4px; }
#main .rt-epcard .rt-epmeta p { font: 600 14px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); margin: 18px 0 8px; }
#main .rt-epcard .rt-eptitle h3 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 22px;
  line-height: 1.3; letter-spacing: -.02em; }
#main .rt-epcard .rt-eptitle a { color: var(--rt-haiti); text-decoration: none; }
#main .rt-epcard .rt-eptitle a:hover { color: var(--rt-peri-darker); }
#main .rt-epcard .fusion-content-tb { font: 400 15px/1.55 'Inter', sans-serif; color: var(--rt-haiti-light); margin-bottom: 8px; }
#main .rt-epcard .rt-player { margin-top: auto; }

/* ==========================================================================
   CLIENTS + LANDING
   ========================================================================== */

/* Logo wall, grouped by industry. A client with no logo shows its name, so the
   wall is legible from day one and no logo appears without being uploaded. */
.rt-clientwall { display: flex; flex-direction: column; gap: 40px; }
.rt-cw-ind { font: 600 13px/1.5 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rt-haiti-light); margin: 0 0 16px; }
/* Flex, not grid: a grid with a shared background paints its empty trailing
   cells, so a two-client industry showed a grey slab across the rest of the row.
   Each cell carries its own border instead. */
.rt-cw-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Fixed 5-up basis rather than flex-grow: growing makes a one-client industry
   render a 260px cell above a seven-client row of 180px ones, and the wall stops
   reading as one wall. */
.rt-cw-item { flex: 0 0 calc((100% - 32px) / 5); background: #FFF; min-height: 96px; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  border: 1px solid var(--rt-neutral-lighter); border-radius: 4px; }
@media (max-width: 1024px) { .rt-cw-item { flex-basis: calc((100% - 24px) / 4); } }
@media (max-width: 700px)  { .rt-cw-item { flex-basis: calc((100% - 8px) / 2); } }
/* Cap width as well as height. Capping height alone lets a wide wordmark
   (PepsiCo) render four times the visual mass of a square roundel (Starbucks),
   and the wall stops reading as one row of equals. */
.rt-cw-item img { max-height: 44px; max-width: 78%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .8; }
.rt-cw-item.is-name span { font: 600 16px/1.3 'Inter', sans-serif; color: var(--rt-haiti); text-align: center; }

/* Quote wall. Masonry-ish via columns, because the quotes vary a lot in length
   and a grid leaves ragged gaps. */
.rt-twall { columns: 3; column-gap: 24px; }
@media (max-width: 1024px) { .rt-twall { columns: 2; } }
@media (max-width: 700px)  { .rt-twall { columns: 1; } }
/* White with a hairline, not a mist fill: the proof strip on the landing page
   sits on mist, and a mist card on a mist band is an invisible card. */
.rt-tw-card { break-inside: avoid; margin: 0 0 24px; padding: 26px 28px; background: #FFF;
  border: 1px solid var(--rt-neutral-lighter); border-radius: 4px; }
.rt-tw-card .q { margin: 0 0 16px; font: 400 17px/1.5 'Inter', sans-serif; color: var(--rt-haiti); }
.rt-tw-card .q::before { content: "\201C"; }
.rt-tw-card .q::after  { content: "\201D"; }
.rt-tw-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.rt-tw-card .r { font: 600 14px/1.4 'Inter', sans-serif; color: var(--rt-haiti); }
.rt-tw-card .c { font: 400 14px/1.4 'Inter', sans-serif; color: var(--rt-haiti-light); }

/* Landing pages: no nav, and the footer trimmed to a single legal line so the
   form is the only way forward. */
body.rt-landing .fusion-footer-widget-area,
body.rt-landing .rt-footer-cols { display: none !important; }
body.rt-landing #main { padding-top: 0 !important; }

/* Free tool landing page. Lede and cover sit in the blue hero beside the form. */
#main .rt-toollede, #main .rt-toollede p { font: 400 18px/1.55 'Inter', sans-serif;
  color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 0 32px; }
#main .rt-toolcover .fusion-post-card-image { border-radius: var(--rt-radius-xs); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18); max-width: 420px; }
#main .rt-toolcover img { display: block; width: 100%; height: auto; }
/* Rendered by a shortcode, so it carries its own band padding rather than
   relying on a container that would still show padding when it is empty. */
#main .rt-toolbody { padding: 96px 0 0; max-width: 68ch; }
#main .rt-toolbody h2 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 40px;
  line-height: 1.15; letter-spacing: -.02em; color: var(--rt-haiti); margin: 0 0 20px; }
#main .rt-toolbody p, #main .rt-toolbody li { font: 400 17px/1.65 'Inter', sans-serif; color: var(--rt-haiti-light); }
#main .rt-toolbody ul { padding-left: 20px; }
#main .rt-toolbody li { margin-bottom: 10px; }

/* Speaking: talk subjects, driven by the topic clusters. */
#main .rt-talkgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1024px) { #main .rt-talkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { #main .rt-talkgrid { grid-template-columns: 1fr; } }
/* No min-height: the topic terms carry no descriptions, so a fixed height leaves
   every card two-thirds empty. Padding sets the height, and it stays even because
   every cluster name fits one line. Add descriptions and the cards grow to fit. */
#main .rt-talk { display: flex; flex-direction: column; gap: 6px;
  padding: 20px 24px; background: #FFF; border: 1px solid var(--rt-neutral-lighter);
  border-radius: 4px; text-decoration: none; transition: border-color .15s, transform .15s; }
#main .rt-talk:hover { border-color: var(--rt-peri-darker); transform: translateY(-2px); }
#main .rt-talk .n { font: 600 18px/1.35 'Inter', sans-serif; color: var(--rt-haiti); }
#main .rt-talk .d { font: 400 15px/1.5 'Inter', sans-serif; color: var(--rt-haiti-light); }

/* Numbered, not iconned: this is a real sequence, so the marker carries order
   rather than decoration. */
#main .rt-breakcol .rt-stepnum { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 40px;
  line-height: 1; letter-spacing: -.02em; color: var(--rt-peri-darker); margin: 0 0 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--rt-neutral-lighter); }

/* Speaking hero photo. Same frame as About, shifted off centre: the source is a
   2:1 stage shot cropped to 4:3, and a centred crop fills the left half with
   unlit curtain. Pushing the window right keeps John and the lit backdrop. */
#main .rt-speakphoto img { object-position: 72% center; }

/* ==========================================================================
   HOME "WHERE IT BREAKS" CARDS — filled grounds
   Three grounds from our own scale, one per position. Cards were white with
   hairline dividers between them; a divider between two filled cards is a seam,
   so the columns carry real spacing instead.
   ========================================================================== */
#main .rt-linkcard > .fusion-column-wrapper {
  padding: 44px 36px; border-radius: var(--rt-radius-xs);
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease; }
/* Desktop only: a floor height gives the three cards presence and stops the
   shortest one looking clipped next to the longest. Left off below 1025px, where
   they stack and the height would just be dead space. */
@media (min-width: 1025px) {
  #main .rt-linkcard > .fusion-column-wrapper { min-height: 430px; } }

/* Gradients on the two dark cards, flat on the light one, which is how the
   reference handles it. Both run between existing steps of the same hue, so it
   reads as depth rather than a second colour.

   CONTRAST IS SET BY THE LIGHT END, since that is the worst case for white text.
   Blue runs peri-dark -> peri-darker (4.6:1 at the light end). Orange runs
   orange-mid -> orange-deep (4.6:1). Anything lighter on either fails AA for the
   15px body copy, which is why the brand orange itself cannot be a ground. */
/* ALL THREE CARDS SHARE ONE GROUND (10 Sept). The set used to be blue, a light
   blue and an orange, which read as a hierarchy and, worse, the orange is the
   system's Consulting marker, so card three signalled a different service line.
   The three are now peers, three training products chosen on volume, so they
   take the same ground and the reader picks on the problem rather than on
   whichever card shouts loudest. Revert by restoring the lc2 and lc3 rules
   below, both left in place and commented rather than deleted. */
#main .rt-lc1 > .fusion-column-wrapper,
#main .rt-lc2 > .fusion-column-wrapper,
#main .rt-lc3 > .fusion-column-wrapper {
  background: var(--rt-peri-darker); }
/* FLAT, NOT A GRADIENT (10 Sept). Taking the darker end rather than the lighter
   one also buys contrast: the gradient's light end, peri-dark #4169F2, sits at
   4.6:1 with white, which is barely over the 4.5 the 15px body copy needs.
   peri-darker clears it comfortably everywhere on the card instead of only at
   the bottom. */
/* Card 2 is peri-lighter on a peri-tint ground, which is barely a step, so it
   needs an edge to read as a card at all. Cards 1 and 3 separate by their own
   contrast and do not.
   The border is declared on all three and only coloured here, so the three keep
   identical geometry rather than one carrying a box-model the others do not. */
/* SUPERSEDED 10 Sept, kept for revert:
#main .rt-lc2 > .fusion-column-wrapper {
  background: var(--rt-peri-lighter); border-color: rgba(13,26,66,.28); } */
/* Widened downward, not upward. Brand 500 was the bright end while the chip had
   a white fill; once the chip went transparent its white label sat straight on
   that bright orange at 3.78:1, a fail. White needs a ground no lighter than
   about L 0.18, so the range is extended into the dark instead: orange-mid at
   the top, orange-deepest at the bottom. Same visible spread, and every white
   thing on the card, body copy and chip label alike, clears AA.
   Verified by sampling the rendered gradient under each line and under the chip
   at three points across its width.

   THE RANGE IS AS BRIGHT AS THE SCALE ALLOWS. The design system has exactly one
   step darker than brand 500, orange-dark #CC5800, and that is 4.2:1 with white,
   just under the 4.5 the 15px body copy needs. orange-mid #C25400 is the lightest
   orange that clears it, so it is the top of the gradient; anything brighter can
   only be used where no white text sits on it. */
/* SUPERSEDED 10 Sept, kept for revert:
#main .rt-lc3 > .fusion-column-wrapper {
  background: linear-gradient(140deg,
    var(--rt-orange-mid) 0%, var(--rt-orange-deep) 100%); } */

/* Ink per ground. Set on the card, not inside a hover or media block, so each
   ground always resolves with the text that belongs to it. */
#main .rt-lc1 h3, #main .rt-lc2 h3, #main .rt-lc3 h3 { color: #FFFFFF; }
#main .rt-lc1 p,  #main .rt-lc2 p,  #main .rt-lc3 p  { color: rgba(255,255,255,.88); }
#main .rt-lc1 .rt-cardicon, #main .rt-lc2 .rt-cardicon, #main .rt-lc3 .rt-cardicon { color: #FFFFFF; }

/* All three chips are the secondary button. The design system carries it in two
   forms and each card gets the one its ground calls for:

     .rt-btn-secondary  black hairline, black label   -> card 2 (light ground)
     .rt-btn-on-dark    white hairline, white label   -> cards 1 and 3 (dark)

   The split is a contrast requirement, not a preference. A white label is 1.4:1
   on the light blue and 5.3:1 on the orange; a black one is 16:1 on the light
   blue and 4.0:1 on the orange. Neither form works on both.
   Values are copied from the button classes rather than re-picked, so the chips
   and the real buttons stay in step. */
#main .rt-linkcard .rt-cardcta { background: transparent; border-radius: var(--rt-radius-btn); }

#main .rt-lc1 .rt-cardcta, #main .rt-lc2 .rt-cardcta, #main .rt-lc3 .rt-cardcta { border-color: rgba(255,255,255,.2); }
#main .rt-lc1 .rt-cardname, #main .rt-lc2 .rt-cardname, #main .rt-lc3 .rt-cardname,
#main .rt-lc1 .rt-cardcta::after, #main .rt-lc2 .rt-cardcta::after, #main .rt-lc3 .rt-cardcta::after { color: var(--rt-white); }
#main .rt-lc1:hover .rt-cardcta, #main .rt-lc2:hover .rt-cardcta, #main .rt-lc3:hover .rt-cardcta { border-color: var(--rt-white); }

/* SUPERSEDED 10 Sept, kept for revert:
#main .rt-lc2 .rt-cardcta { border-color: rgba(0,0,0,.15); }
#main .rt-lc2 .rt-cardname, #main .rt-lc2 .rt-cardcta::after { color: var(--rt-neutral-darkest); }
#main .rt-lc2:hover .rt-cardcta { border-color: var(--rt-haiti-dark); } */

/* The chevron runs on hover of the whole card, not just the chip, because the
   whole card is the link. */
#main .rt-linkcard .rt-cardcta::after { transition: transform .18s ease; }
#main .rt-linkcard:hover .rt-cardcta::after { transform: translateX(var(--rt-chev-run)); }
@media (prefers-reduced-motion: reduce) {
  #main .rt-linkcard:hover .rt-cardcta::after { transform: none; } }


/* Lift, not flood. */
#main .rt-linkcard:hover > .fusion-column-wrapper {
  transform: translateY(-6px); box-shadow: 0 16px 32px rgba(13,26,66,.18); }
@media (prefers-reduced-motion: reduce) {
  #main .rt-linkcard:hover > .fusion-column-wrapper { transform: none; } }

@media (max-width: 1024px) { #main .rt-linkcard > .fusion-column-wrapper { padding: 34px 28px; } }

/* ==========================================================================
   BUTTON RADIUS — one value, one place
   Buttons were inconsistent: Avada's global option renders 4px, while several
   hand-built ones were pinned to 1px to look square. Both now read the same
   token. !important is needed because Avada emits its button radius as generated
   CSS with higher specificity than any child-theme class can reach; this is the
   documented exception, not a habit.
   ========================================================================== */
.fusion-button,
.fusion-button-default,
.fusion-form-form-wrapper .fusion-button,
.fusion-form-form-wrapper button[type="submit"],
.fusion-form-form-wrapper input[type="submit"] {
  border-radius: var(--rt-radius-btn) !important; }

/* ==========================================================================
   SERVICE CARDS — whole card is the link, button carries the same chevron
   ========================================================================== */
/* Avada makes a linked column clickable but leaves the cursor alone, so a card
   that navigates looks like it does not. Applies to the problem cards too, which
   have been clickable all along without saying so. */
#main .rt-svc, #main .rt-linkcard,
#main .rt-svc .fusion-column-wrapper, #main .rt-linkcard .fusion-column-wrapper { cursor: pointer; }

/* Same chevron and the same 12px run as the chips above, so the two sections
   behave identically. Right padding is the runway it slides into. */
#main .rt-svc .fusion-button { padding-right: 34px; position: relative; }
#main .rt-svc .fusion-button::after {
  content: "\203A"; position: absolute; right: 17px; top: 50%;
  transform: translateY(-50%); font-size: 20px; line-height: 1;
  transition: transform .18s ease; }
#main .rt-svc:hover .fusion-button::after { transform: translateY(-50%) translateX(var(--rt-chev-run)); }
@media (prefers-reduced-motion: reduce) {
  #main .rt-svc:hover .fusion-button::after { transform: translateY(-50%); } }

/* Service card text block: tighter, and much tighter at the foot.
   The inner column carried 48px on every side plus a 20px vertical margin, so
   the button sat 68px clear of the image and the card read as mostly padding.
   Both are set here rather than in the page so the two cards cannot drift. */
#main .rt-svc .fusion_builder_column_inner > .fusion-column-wrapper {
  padding: 52px 36px 32px !important; }
#main .rt-svc .fusion_builder_column_inner { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 1024px) {
  #main .rt-svc .fusion_builder_column_inner > .fusion-column-wrapper {
    padding: 40px 24px 26px !important; } }

/* Balance the big display headings so a 52px line does not end on one orphaned
   word. Affects line-breaking only, never size or layout, and browsers without
   support simply ignore it. Left off body copy on purpose: balance on a long
   paragraph makes the measure ragged. */
#main .fusion-title h1, #main .fusion-title h2 { text-wrap: balance; }