/*!
Theme Name: AccessLevelUp
Theme URI: https://accesslevelup.com/
Author: Access Level Up
Author URI: https://accesslevelup.com/
Description: Custom, accessibility-first theme for Access Level Up. Built to WCAG 2.2 Level AA: semantic landmarks, keyboard-operable navigation, visible focus, accessible forms and AA colour contrast throughout.
Version: 3.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: accesslevelup
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

AccessLevelUp is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* =========================================================================
   GLOBAL BRAND DESIGN TOKENS  —  single source of truth for the whole site.
   Every template stylesheet (css/*.css) maps its own local tokens onto these,
   so changing a value here recolours the entire site.

   Palette: deep navy surfaces, a red action colour, a blue informational
   accent, and near-white / light-grey section backgrounds.
   ========================================================================= */
:root {
  /* --- Core brand ------------------------------------------------------ */
  --brand-navy:        #0f2a44;   /* dark bands, footer, CTA strip          */
  --brand-navy-700:    #0b2138;   /* deeper navy — gradients, hover         */
  --brand-navy-900:    #071a2c;   /* deepest navy                            */
  --brand-ink:         #101828;   /* headings / near-black text             */
  --brand-body:        #475467;   /* body copy                              */

  --brand-red:         #d62b1f;   /* primary action — button fills          */
  --brand-red-600:     #b52318;   /* red hover / pressed                    */
  --brand-red-50:      #fdecea;   /* red tint background                    */
  /* Red TEXT on a light surface. --brand-red is 4.47:1 on --brand-surface,
     which fails WCAG 1.4.3 for normal-size text by a hair. This darker red
     clears it at 4.99:1 on grey and 5.54:1 on white. Use it for red copy;
     keep --brand-red for fills that carry white text. */
  --brand-red-text:    #bf2418;

  --brand-blue:        #1668d6;   /* informational accent — links, ticks    */
  --brand-blue-600:    #0f55b3;   /* blue hover                             */
  --brand-blue-50:     #e8f1fd;   /* blue tint background                   */
  /* Blue TEXT on navy. --brand-blue is only 2.77:1 on --brand-navy, so any
     blue accent copy on a dark band uses this tint instead (7.17:1). */
  --brand-blue-on-dark: #8fb8f0;
  /* Secondary/meta text (dates, captions). 5.65:1 on white, 5.09:1 on
     --brand-surface. Replaces the ad-hoc #7a879b / #7e8795 greys (3.6:1). */
  --brand-muted:       #5d6878;
  /* Focus ring colours: blue on light surfaces, white on dark ones. */
  --brand-focus:       #1668d6;
  --brand-focus-on-dark: #ffffff;

  /* --- Surfaces -------------------------------------------------------- */
  --brand-paper:       #ffffff;   /* cards                                  */
  --brand-surface:     #f1f3f7;   /* alternating section background         */
  --brand-surface-2:   #e6eaf1;   /* stronger grey                          */
  --brand-banner:      #e6ecf7;   /* homepage hero band — top               */
  --brand-banner-2:    #f5f8fc;   /* homepage hero band — bottom            */
  --brand-line:        #e4e8ef;   /* hairline borders                       */
  --brand-line-strong: #d3dae5;

  /* --- Shape & depth --------------------------------------------------- */
  --brand-radius:      12px;
  --brand-radius-sm:   9px;
  --brand-shadow:      0 18px 40px -20px rgba(16,24,40,.22);
  --brand-shadow-sm:   0 6px 18px -10px rgba(16,24,40,.16);

  /* --- Type ------------------------------------------------------------ */
  --brand-font-head:   'Poppins', system-ui, sans-serif;
  --brand-font-body:   'Inter', system-ui, sans-serif;

  /* --- Legacy aliases --------------------------------------------------
     Existing markup still references the --ba-* names. They now point at
     the brand tokens above, so nothing needs renaming template-side.      */
  --ba-purple:        var(--brand-blue);
  --ba-purple-600:    var(--brand-blue-600);
  --ba-purple-700:    var(--brand-navy);
  --ba-purple-deep:   var(--brand-navy);
  --ba-violet-band:   var(--brand-navy);
  --ba-lav-50:        var(--brand-surface);
  --ba-lav-100:       var(--brand-surface);
  --ba-lav-200:       var(--brand-surface-2);
  --ba-pink:          var(--brand-red);
  --ba-ink:           var(--brand-ink);
  --ba-body:          var(--brand-body);
  --ba-line:          var(--brand-line);
  --ba-paper:         var(--brand-paper);
  --ba-radius:        var(--brand-radius);
  --ba-radius-sm:     var(--brand-radius-sm);
  --ba-shadow:        var(--brand-shadow);
  --ba-shadow-sm:     var(--brand-shadow-sm);
  --ba-font-head:     var(--brand-font-head);
  --ba-font-body:     var(--brand-font-body);
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--brand-blue);
}

/* :where() keeps these at zero specificity, so a component's own colours
   (buttons, cards, footer links) are never overridden by visited/hover. */
:where(a):visited {
	color: var(--brand-blue-600);
}

:where(a):hover,
:where(a):active {
	color: var(--brand-blue-600);
}

a:focus,
a:focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 3px;
}



/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,


button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

/* Default pages (Privacy Policy, Terms etc) — proper padding */
.site-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 28px 80px;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

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

/* Skip link — the first thing a keyboard user reaches. Solid navy on white so
   it is unmissable, and fixed so it stays put wherever the page is scrolled. */
.screen-reader-text:focus {
	background-color: var(--brand-navy);
	border-radius: 0 0 8px 0;
	box-shadow: 0 6px 20px -6px rgba(16, 24, 40, 0.5);
	clip: auto !important;
	clip-path: none;
	color: #ffffff;
	display: block;
	font-family: var(--brand-font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	height: auto;
	left: 0;
	line-height: normal;
	margin: 0;
	outline: 3px solid #ffffff;
	outline-offset: -6px;
	padding: 16px 26px;
	position: fixed !important;
	text-decoration: none;
	top: 0;
	width: auto;
	z-index: 100000;
}

/* The skip-link target is focused programmatically — it should not draw a ring. */
#primary[tabindex="-1"] {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/* =========================================================================
   SITE HEADER — logo, primary navigation (mega dropdowns) and CTA
   ========================================================================= */

.alu-header {
  --alu-navy:     var(--brand-ink);
  --alu-navy2:    var(--brand-navy);
  --alu-teal:     var(--brand-blue);
  --alu-teal-600: var(--brand-blue-600);
  --alu-line:     var(--brand-line);

  position: sticky;
  top: 0;
  z-index: 999;
  /* Solid white bar at all times — the header sits ON the page, never over it. */
  background: #fff;
  border-bottom: 1px solid var(--alu-line);
  font-family: var(--brand-font-head);
  transition: box-shadow .25s ease;
}

/* Once the page scrolls, lift the bar with a soft shadow. */
.alu-header.alu-scrolled,
.alu-header.alu-open {
  box-shadow: 0 6px 20px -12px rgba(16,24,40,.22);
}

.alu-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---- Logo ---- */
.alu-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.alu-logo img,
.alu-logo .custom-logo { height: 40px; width: auto; max-width: none; display: block; }

/* ---- Right block — nav and CTA share one row ---- */
.alu-right {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

/* ---- Search ---- */
.alu-search { display: flex; align-items: center; gap: 8px; }
.alu-search input[type="search"] {
  width: 210px; height: 42px; padding: 0 16px;
  border: 1.5px solid var(--alu-line); border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: #294a52;
  background: #fff; outline: none; 
}
.alu-search input[type="search"]:focus { border-color: var(--alu-teal); }
.alu-search button {
  width: 44px; height: 42px; border: none; border-radius: 10px; padding: 0;
  background: var(--alu-teal); color: #fff; cursor: pointer;
  display: grid; place-items: center; 
}

.alu-search svg { width: 18px; height: 18px; }

/* ---- Nav + buttons row ---- */
.alu-rightrow { display: flex; align-items: center; gap: 30px; }

/* ---- Nav (wp_nav_menu output) ---- */
.alu-nav { display: block; width: auto; }
.alu-nav ul,
.alu-nav #primary-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 26px; width: auto;
}
.alu-nav li { position: relative; margin: 0; }
.alu-nav > ul > li > a:focus,
.alu-nav > #primary-menu > li > a:focus { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.alu-nav > ul > li > a,
.alu-nav > #primary-menu > li > a {
  font-family: var(--brand-font-head); font-weight: 500; font-size: 15px;
  color: var(--brand-ink); text-decoration: none; padding: 8px 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease;
}
.alu-nav > ul > li > a:hover,
.alu-nav > #primary-menu > li > a:hover { color: var(--brand-blue); }

/* =========================================================================
   MEGA DROPDOWN (3 columns, icons, badges)
   ========================================================================= */
.alu-nav .sub-menu.alu-mega,
.alu-nav ul ul {
  position: absolute; top: 100%; left: 0;
  width: 720px; max-width: 92vw;
  margin: 16px 0 0; padding: 22px 24px 18px;
  background: #fff; border: 1px solid var(--alu-line); border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(13, 14, 22, .35);
  display: block; column-count: 3; column-gap: 20px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  /* No visibility transition: it kept closed panels focusable for 200ms. */
  transition: transform .2s ease, opacity .2s ease;
}

/* The `hidden` attribute is the single source of truth for open/closed. */
.alu-nav [hidden] { display: none !important; }

/* Neutralise Underscores' hover rule, which shifted the panel with left:auto. */
.main-navigation.alu-nav ul li:hover > ul,
.main-navigation.alu-nav ul li.focus > ul,
.main-navigation.alu-nav ul ul li:hover > ul,
.main-navigation.alu-nav ul ul li.focus > ul { left: 0; }
/* Hover bridge: lets the pointer travel into the panel without a gap. */
.alu-nav .menu-item-has-children::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
.alu-nav li.is-open > .alu-mega,
.alu-nav li.is-open > ul {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.alu-mega-item { margin: 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
.alu-mega-item > a {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 11px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--alu-navy); text-decoration: none; 
}

.alu-mi-ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--brand-blue-50); color: var(--brand-blue);
  display: grid; place-items: center;
}
.alu-mi-ic svg { width: 21px; height: 21px; }
.alu-mi-ic img { display: block; width: 21px; height: 21px; }
.alu-mi-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.25; }
.alu-badge {
  font-family: var(--brand-font-head); font-weight: 600; font-size: 13px;
  color: var(--brand-blue-600); background: var(--brand-blue-50); border: 1px solid #cfe0f8;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.alu-mega-foot {
  column-span: all; -webkit-column-span: all; margin-top: 14px; padding-top: 16px;
  border-top: 1px solid var(--alu-line); text-align: center;
}
.alu-mega-foot > a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--brand-font-head); font-weight: 600; font-size: 14.5px;
  color: var(--brand-blue); text-decoration: none;
}
.alu-mega-foot svg { width: 16px; height: 16px; transition: transform .15s ease; }


/* ---- Buttons ---- */
.alu-actions { display: flex; align-items: center; gap: 12px; }
.alu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--brand-font-head); font-weight: 700; font-size: 14.5px;
  padding: 12px 22px; border-radius: 8px; text-decoration: none;
  white-space: nowrap; border: none; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
/* Free Assessment — the single red action in the bar */
.alu-btn-primary {
  background: var(--brand-red) !important;
  color: #ffffff !important;
  box-shadow: none;
}
.alu-btn-primary:hover { background: var(--brand-red-600) !important; }
.alu-btn-primary:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 3px; }

/* Secondary — navy outline, kept for templates that still use it */
.alu-btn-navy {
  background: transparent !important;
  color: var(--brand-navy) !important;
  border: 1.5px solid var(--brand-navy) !important;
  box-shadow: none;
}
.alu-btn-navy:hover { background: var(--brand-navy) !important; color: #fff !important; }


/* ---- Menu button (hidden on desktop) ---- */
.alu-burger { display: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .alu-header-inner { min-height: 76px; flex-wrap: wrap; }
  .alu-logo img,
  .alu-logo .custom-logo { height: 40px; }

  .alu-burger {
    display: inline-flex; margin-left: auto;
    width: 46px; height: 46px; border: 1px solid var(--alu-line); border-radius: 10px;
    background: #fff; position: relative; cursor: pointer; font-size: 0; color: transparent; padding: 0;
  }
  .alu-burger::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 2px; background: var(--alu-navy);
    box-shadow: 0 -6px 0 var(--alu-navy), 0 6px 0 var(--alu-navy);
  }

.alu-right {
    order: 5; flex-basis: 100%; width: 100%; align-items: stretch;
    flex-direction: column;
    display: none; padding: 8px 0 18px; gap: 18px;
  }

  /* Open mobile menu = a fixed panel under the bar that scrolls on its own,
     so reaching sub-pages never requires scrolling the page behind it. */
  .alu-header.alu-open .alu-right {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--alu-panel-top, 76px);
    bottom: 0;
    z-index: 998;
    margin: 0;
    padding: 14px 22px 32px;
    background: #fff;
    border-top: 1px solid var(--alu-line);
    overflow-y: auto;
    overscroll-behavior: contain;      /* reaching the end does not scroll the page */
    -webkit-overflow-scrolling: touch;
  }

  /* Freeze the page behind the open menu. Pinch-zoom stays allowed on
     purpose (WCAG 1.4.4 — never block zoom). */
  body.alu-nav-lock {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pinch-zoom;
  }
  body.alu-nav-lock .alu-header.alu-open .alu-right {
    touch-action: pan-y pinch-zoom;
  }

  .alu-search { width: 100%; }
  .alu-search input[type="search"] { flex: 1; width: auto; }

  .alu-rightrow { flex-direction: column; align-items: stretch; gap: 18px; }

  .alu-nav ul,
  .alu-nav #primary-menu { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
  .alu-nav > ul > li > a:focus,
.alu-nav > #primary-menu > li > a:focus { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.alu-nav > ul > li > a,
  .alu-nav > #primary-menu > li > a { display: flex; width: 100%; padding: 12px 4px; justify-content: space-between; }

 /* On mobile the mega panel becomes a single column. */
  .alu-nav .sub-menu.alu-mega,
  .alu-nav ul ul {
    position: static; width: auto; max-width: none;
    box-shadow: none; border: none;
    margin: 0 0 4px 8px; padding: 0; column-count: 1;
    display: none !important;
    opacity: 1; visibility: visible; transform: none;
  }

  .alu-nav li.is-open > .sub-menu.alu-mega,
  .alu-nav li.is-open > ul {
    display: block !important;
  }

  .alu-mi-ic { width: 34px; height: 34px; }
  .alu-mega-foot { text-align: left; }

  .alu-actions { width: 100%; }
  .alu-btn { flex: 1; }
}




/* =========================================================================
   Born Accessible — Homepage template styles
   Paste this block at the END of your theme's style.css
   (or keep it as /css/homepage.css and enqueue via functions.php)
   ========================================================================= */

/* ---- Fonts (load once) ---- */
/* Google Fonts loaded via <link rel="preconnect"> in wp_head — see functions.php fix below */

/* ---- Design tokens ---- */
.ba-home {
  /* Mapped onto the global brand palette in :root — do not hardcode hex here. */
  --ba-purple:        var(--brand-blue);
  --ba-purple-600:    var(--brand-blue-600);
  --ba-purple-700:    var(--brand-navy);
  --ba-purple-deep:   var(--brand-navy);
  --ba-violet-band:   var(--brand-navy);
  --ba-lav-50:        var(--brand-surface);
  --ba-lav-100:       var(--brand-surface);
  --ba-lav-200:       var(--brand-surface-2);
  --ba-pink:          var(--brand-red);
  --ba-ink:           var(--brand-ink);
  --ba-body:          var(--brand-body);
  --ba-line:          var(--brand-line);
  --ba-paper:         var(--brand-paper);
  --ba-radius:        var(--brand-radius);
  --ba-radius-sm:     var(--brand-radius-sm);
  --ba-shadow:        var(--brand-shadow);
  --ba-shadow-sm:     var(--brand-shadow-sm);
  --ba-font-head:     var(--brand-font-head);
  --ba-font-body:     var(--brand-font-body);

  font-family: var(--ba-font-body);
  color: var(--ba-body);
  line-height: 1.6;
  background: var(--ba-paper);
  -webkit-font-smoothing: antialiased;
}

.ba-home * { box-sizing: border-box; }

.ba-home h1, .ba-home h2, .ba-home h3, .ba-home h4 {
  font-family: var(--ba-font-head);
  color: var(--ba-ink);
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
}

.ba-home p { margin: 0; }
.ba-home img { max-width: 100%; display: block; }
.ba-home a { text-decoration: none; color: inherit; }

/* ---- Layout helpers ---- */
.ba-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ba-section { padding: 84px 0; }
.ba-center { text-align: center; }

/* Section eyebrow — small red label sitting directly above the heading.
   Sentence case, not uppercase: it reads as a sub-line, not a category tag. */
.ba-eyebrow {
  font-family: var(--ba-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-red-text);
  margin-bottom: 12px;
}
.ba-band .ba-eyebrow,
.ba-spotlight .ba-eyebrow,
.ba-cta .ba-eyebrow { color: #ff8a7d; }

.ba-h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; }
/* Left-aligned section headings wrap at a comfortable measure. */
.ba-h2-wide { max-width: 22ch; }
.ba-center .ba-h2-wide { max-width: none; }
.ba-lead { font-size: 17px; max-width: 640px; margin: 14px auto 0; }
.ba-center .ba-lead { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.ba-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ba-font-head); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ba-btn svg { width: 18px; height: 18px; }
.ba-btn-primary { background: var(--brand-red); color: #fff; box-shadow: none; }
.ba-btn-primary:hover { background: var(--brand-red-600); color: #fff; }
.ba-btn-primary:focus, .ba-btn-primary:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 3px; }

.ba-btn-ghost { background: transparent; color: var(--brand-navy); border-color: var(--brand-line-strong); }
.ba-btn-ghost:hover { border-color: var(--brand-navy); background: var(--brand-surface); }

.ba-btn-light { background: #fff; color: var(--brand-navy); }
.ba-btn-light:hover { background: var(--brand-surface); }

.ba-btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.ba-btn-outline-light:hover { background: #fff; color: var(--brand-navy); }

.ba-link { color: var(--brand-blue); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ba-link svg { width: 16px; height: 16px; }

/* =========================================================================
   1. HERO
   ========================================================================= */
.ba-hero { background: linear-gradient(180deg,#f7f8fc 0%, #edeef8 100%); padding: 64px 0 80px; }
.ba-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.ba-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ba-font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ba-purple);
  background: none; padding: 0; margin-bottom: 18px;
}
.ba-hero h1 {
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.08; color: var(--ba-purple-deep);
}
.ba-hero h1 span { color: var(--ba-purple); }
.ba-hero p { margin-top: 18px; max-width: 480px; font-size: 16px; }
.ba-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.ba-hero-ctas .ba-btn { margin-top: 0; }
.ba-btn-outline-dark { background: transparent; color: var(--ba-purple-deep); border-color: var(--ba-purple-deep); }
.ba-btn-outline-dark:hover { background: var(--ba-purple-deep); color: #fff; }

.ba-hero-trust {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.ba-hero-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ba-font-head); font-weight: 600; font-size: 13.5px; color: var(--ba-body);
}
.ba-hero-trust li svg { width: 16px; height: 16px; color: var(--ba-purple); flex: none; }

/* ---- Hero dashboard mockup ---- */
.ba-hero-mock { position: relative; }
.ba-mock-card {
  background: #fff; border: 1px solid var(--ba-line); border-radius: 20px;
  padding: 26px; box-shadow: 0 40px 80px -30px rgba(13,14,22,.35);
}
.ba-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--ba-line); }
.ba-mock-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ba-font-head); font-weight: 700; font-size: 14.5px; color: var(--ba-ink); }
.ba-mock-title svg { width: 20px; height: 20px; color: var(--ba-purple); }
.ba-mock-pill {
  font-family: var(--ba-font-head); font-weight: 700; font-size: 11.5px;
  background: var(--ba-lav-100); color: var(--ba-purple); padding: 4px 10px; border-radius: 999px;
}
.ba-mock-body { display: flex; align-items: center; gap: 26px; padding: 22px 0; }
.ba-mock-ring {
  position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(var(--ba-purple) calc(var(--pct) * 3.6deg), var(--ba-lav-100) 0);
  display: grid; place-items: center;
}
.ba-mock-ring::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.ba-mock-ring strong { position: relative; z-index: 1; font-family: var(--ba-font-head); font-weight: 800; font-size: 20px; color: var(--ba-ink); }
.ba-mock-ring strong small { font-size: 12px; font-weight: 700; }
.ba-mock-pour { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ba-mock-pour li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ba-body); }
.ba-mock-pour i { width: 8px; height: 8px; border-radius: 50%; background: var(--ba-lav-200); flex: none; }
.ba-mock-pour i.on { background: var(--ba-purple); }
.ba-mock-checks { list-style: none; margin: 0; padding-top: 18px; border-top: 1px solid var(--ba-line); display: grid; gap: 11px; }
.ba-mock-checks li { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ba-ink); }
.ba-mock-checks li span {
  font-family: var(--ba-font-head); font-weight: 700; font-size: 11.5px;
  color: #147a4e; background: #e7f6ee; padding: 3px 10px; border-radius: 999px;
}

/* =========================================================================
   1b. ACCESSIBILITY FOR EVERY MAJOR PLATFORM
   ========================================================================= */
.ba-platforms { background: var(--ba-purple-deep); padding: 44px 0; }
.ba-platforms-label {
  text-align: center; font-family: var(--ba-font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; color: rgba(255,255,255,.8); margin: 0 0 26px;
}
.ba-platform-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 12px;
}
.ba-platform-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 13px 10px; color: #fff; font-family: var(--ba-font-head); font-weight: 600; font-size: 13.5px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ba-platform-badge svg { width: 16px; height: 16px; color: #9dc0f2; flex: none; }
.ba-platform-badge:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); transform: translateY(-2px); }

/* =========================================================================
   1c. SERVICES
   ========================================================================= */
.ba-services2 { padding: 88px 0; }
.ba-svc2-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; text-align: left; }
.ba-svc2-card {
  display: block; background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 28px 26px; box-shadow: var(--ba-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ba-svc2-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(13,14,22,.28); border-color: var(--ba-lav-200); }
.ba-svc2-ic {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center; background: var(--ba-lav-100); color: var(--ba-purple);
}
.ba-svc2-ic svg { width: 24px; height: 24px; }
.ba-svc2-card h3 { font-size: 17px; margin-bottom: 8px; }
.ba-svc2-card p { font-size: 14px; margin-bottom: 16px; }
.ba-svc2-card .ba-link { font-size: 13.5px; }

/* =========================================================================
   1d. WHY CHOOSE US
   ========================================================================= */
/* =========================================================================
   DO IT ONCE, DO IT RIGHT — wrong way vs right way
   Two cards side by side: the failure mode on the left in red, ours on the
   right in blue. Deliberately plain so the contrast does the talking.
   ========================================================================= */
.ba-compare { background: #fff; }
.ba-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px;
}
.ba-compare-card {
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  padding: 30px 32px 32px;
  background: var(--brand-surface);
}
.ba-compare-card.ba-compare-good { background: #fff; box-shadow: var(--brand-shadow-sm); }
.ba-compare-card h3 { font-size: 19px; margin: 0 0 20px; letter-spacing: -.01em; }
.ba-compare-bad h3  { color: var(--brand-red-text); }
.ba-compare-good h3 { color: var(--brand-blue); }
.ba-compare-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ba-compare-card li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.55; color: var(--brand-body);
}
.ba-compare-card li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.ba-compare-card li .ba-x    { color: var(--brand-red); }
.ba-compare-card li .ba-tick { color: var(--brand-blue); }

/* =========================================================================
   WHY CHOOSE US
   ========================================================================= */
.ba-why { background: var(--brand-surface); }
.ba-why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 44px; text-align: left; }

/* Credential strip under the cards — dot-separated, quiet, centred. */
.ba-why-trust {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 0;
}
.ba-why-trust li {
  font-family: var(--brand-font-head); font-weight: 600; font-size: 14px;
  color: var(--brand-navy); padding: 0 26px; position: relative;
}
.ba-why-trust li + li::before {
  content: "·"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  color: var(--brand-line-strong); font-size: 18px; line-height: 1;
}
.ba-why-card {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 26px; box-shadow: var(--ba-shadow-sm);
}
.ba-why-ic {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 14px;
  display: grid; place-items: center; background: var(--ba-lav-100); color: var(--ba-purple);
}
.ba-why-ic svg { width: 22px; height: 22px; }
.ba-why-card h3 { font-size: 16px; margin-bottom: 6px; }
.ba-why-card p { font-size: 13.5px; margin: 0; }

/* =========================================================================
   1e. OUR PROCESS
   ========================================================================= */
.ba-process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 40px; text-align: left; }
.ba-process-card {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 26px;
}
.ba-process-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 16px;
  background: var(--ba-purple-deep); color: #fff;
  font-family: var(--ba-font-head); font-weight: 700; font-size: 13px;
}
.ba-process-card h3 { font-size: 16px; margin-bottom: 6px; }
.ba-process-card p { font-size: 13.5px; margin: 0; }

/* =========================================================================
   10b. INDUSTRIES WE SERVE
   ========================================================================= */
.ba-industries { background: var(--ba-lav-50); }
.ba-industry-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ba-industry-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--ba-line); border-radius: 999px;
  padding: 12px 20px; font-family: var(--ba-font-head); font-weight: 600; font-size: 14px;
  color: var(--ba-ink); text-decoration: none; box-shadow: var(--ba-shadow-sm);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ba-industry-pill svg { width: 15px; height: 15px; color: var(--ba-purple); transition: transform .15s ease; }
.ba-industry-pill:hover { background: var(--ba-purple-deep); color: #fff; transform: translateY(-2px); }
.ba-industry-pill:hover svg { color: #fff; transform: translateX(2px); }

/* =========================================================================
   11b. COMPLIANCE STANDARDS
   ========================================================================= */
.ba-standards { padding: 40px 0; border-top: 1px solid var(--ba-line); border-bottom: 1px solid var(--ba-line); }
.ba-standards-label {
  text-align: center; font-family: var(--ba-font-head); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; color: var(--ba-body); margin: 0 0 20px;
}
.ba-standards-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; }
.ba-standards-row span {
  font-family: var(--ba-font-head); font-weight: 700; font-size: 14px; color: var(--ba-purple-deep);
}

/* =========================================================================
   2. PRICING / MEDALS BAND
   ========================================================================= */
.ba-pricing { padding: 84px 0; }

/* Five equal tier cards. Cards stretch to the tallest in the row so every
   "Get started" button lines up (margin-top:auto on the CTA does the work). */
.ba-tiers {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 20px;
  margin: 46px 0 0; text-align: left; align-items: stretch;
}
.ba-tier {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  padding: 30px 24px 26px;
  box-shadow: var(--brand-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ba-tier:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow); border-color: var(--brand-line-strong); }

/* Highlighted plan — heavier border, and a badge straddling the top edge. */
.ba-tier.is-featured { border: 2px solid var(--brand-blue); box-shadow: 0 22px 44px -22px rgba(22,104,214,.42); }
.ba-tier-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
  background: var(--brand-blue); color: #fff;
  font-family: var(--brand-font-head); font-weight: 700; font-size: 12px;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}

.ba-tier-name { font-size: 19px; margin: 0 0 8px; color: var(--brand-ink); }
.ba-tier-desc { font-size: 14px; line-height: 1.55; color: var(--brand-body); margin: 0 0 20px; }

.ba-tier-price { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--brand-line); }
.ba-tier-price strong {
  display: block; font-family: var(--brand-font-head); font-weight: 800;
  font-size: 30px; letter-spacing: -.02em; color: var(--brand-ink); line-height: 1.1;
}
.ba-tier-price span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--brand-body); }

.ba-tier-feats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.ba-tier-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--brand-body);
}
.ba-tier-feats svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-blue); }

/* Pushes the button to the bottom of whatever height the row settles at. */
.ba-tier-cta { margin-top: auto; width: 100%; justify-content: center; padding: 12px 18px; font-size: 14.5px; }

.ba-tiers-note { margin-top: 32px; font-size: 14px; color: var(--brand-body); text-align: center; }
.ba-pricing-cta { margin-top: 28px; }

/* =========================================================================
   PRICING PAGE  (Template Name: Pricing → pricing.php)
   Section order and backgrounds:
     hero (navy) → tiers (white) → included (grey) → table (white)
     → faq (grey) → cta (navy)
   ========================================================================= */
.ba-home.alu-pricing-page .prc-hero {
  background: var(--brand-navy);
  color: #fff;
  padding: 34px 0 76px;
}
.alu-pricing-page .prc-hero .ba-eyebrow { color: #ff8a7d; }
.alu-pricing-page .prc-hero h1 {
  color: #fff; font-family: var(--brand-font-head); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.025em; line-height: 1.08;
}
.alu-pricing-page .prc-hero-lead {
  margin-top: 18px; max-width: 52ch;
  font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78);
}

/* breadcrumb */
.prc-crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.8); margin-bottom: 28px;
}
.prc-crumb a { color: rgba(255,255,255,.8); transition: color .15s ease; }
.prc-crumb a:hover { color: #fff; text-decoration: underline; }
.prc-crumb span[aria-current="page"] { color: #fff; font-weight: 600; }

/* Section backgrounds — must keep alternating.
   Written as .ba-home.alu-pricing-page so these beat the homepage rhythm
   rules further down the file (the Pricing page carries both classes, and
   its FAQ section carries both .ba-faq and .prc-faq). */
.ba-home.alu-pricing-page .prc-tiers    { background: #fff; }
.ba-home.alu-pricing-page .prc-included { background: var(--brand-surface); }
.ba-home.alu-pricing-page .prc-table-sec{ background: #fff; }
.ba-home.alu-pricing-page .prc-faq      { background: var(--brand-surface); }

/* ---- What every package includes ---- */
.prc-inc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 44px; text-align: left; }
.prc-inc-card {
  background: #fff; border: 1px solid var(--brand-line); border-radius: var(--brand-radius);
  padding: 26px 24px; box-shadow: var(--brand-shadow-sm);
}
.prc-inc-ic {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--brand-blue-50); color: var(--brand-blue);
}
.prc-inc-ic svg { width: 22px; height: 22px; }
.prc-inc-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.prc-inc-card p { font-size: 13.5px; line-height: 1.6; color: var(--brand-body); margin: 0; }

/* ---- Comparison table ----
   The table is wider than a phone, so it scrolls inside its own container
   rather than making the page scroll sideways. */
.prc-table-scroll { position: relative; margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prc-table {
  width: 100%; min-width: 760px; border-collapse: collapse;
  border: 1px solid var(--brand-line); border-radius: var(--brand-radius);
  overflow: hidden; text-align: left; background: #fff;
}
.prc-table thead th {
  background: var(--brand-navy); color: #fff;
  font-family: var(--brand-font-head); font-weight: 700; font-size: 14px;
  padding: 15px 18px; white-space: nowrap;
}
.prc-table thead th:first-child { text-align: left; }
.prc-table thead th:not(:first-child),
.prc-table tbody td { text-align: center; }
.prc-table tbody th {
  font-family: var(--brand-font-body); font-weight: 600; font-size: 14px;
  color: var(--brand-ink); padding: 15px 18px; text-align: left;
}
.prc-table tbody td { padding: 15px 18px; font-size: 14px; color: var(--brand-body); }
.prc-table tbody tr { border-top: 1px solid var(--brand-line); }
.prc-table tbody tr:nth-child(even) { background: var(--brand-surface); }
.prc-table .prc-yes { width: 18px; height: 18px; color: var(--brand-blue); display: inline-block; vertical-align: middle; }
.prc-table .prc-no  { color: var(--brand-line-strong); font-size: 18px; }

@media (max-width: 980px) {
  .prc-inc-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .prc-inc-grid { grid-template-columns: 1fr; }
  .ba-home.alu-pricing-page .prc-hero { padding: 26px 0 56px; }
}

/* =========================================================================
   3. WHY ACCESSIBILITY MATTERS
   ========================================================================= */
.ba-band { background: var(--ba-violet-band); color: #fff; padding: 88px 0 64px; }
.ba-band h2, .ba-band h3, .ba-band h4 { color: #fff; }
.ba-band-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.ba-band-intro { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; margin: 18px 0 28px; max-width: 520px; }

.ba-stat-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--ba-radius);
  padding: 30px; display: grid; gap: 22px;
}
.ba-stat { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ba-stat:last-child { padding-bottom: 0; border-bottom: none; }
.ba-stat strong { display: block; font-family: var(--ba-font-head); font-weight: 800; font-size: 30px; color: #fff; }
.ba-stat span { display: block; font-size: 13.5px; color: rgba(255,255,255,.8); margin-top: 4px; }

.ba-benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding-top: 52px; border-top: 1px solid rgba(255,255,255,.12); }
.ba-benefit-ic {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 14px;
  display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff;
}
.ba-benefit-ic svg { width: 22px; height: 22px; }
.ba-benefit h3 { font-size: 16px; margin-bottom: 6px; }
.ba-benefit p { color: rgba(255,255,255,.75); font-size: 13.5px; margin: 0; }

/* =========================================================================
   4. PARTNER / TECH LOGOS
   ========================================================================= */
.ba-logos-band { background: var(--ba-lav-50); }
.ba-logo-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-top: 34px; }
.ba-logo-cell {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius-sm);
  height: 92px; display: grid; place-items: center; box-shadow: var(--ba-shadow-sm);
  font-family: var(--ba-font-head); font-weight: 700; color: #6a6580; font-size: 15px;
  transition: transform .15s ease;
}


/* ---- Client logo cloud ---- */
.ba-clients-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 28px 30px; margin-top: 38px;
  align-items: center; justify-items: center;
}
.ba-client {
  font-family: var(--ba-font-head); font-weight: 700; color: #5e5b70; font-size: 15px;
  opacity: 1; transition: all .22s ease; text-align: center;
  padding: 12px 22px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: default;
}


/* ---- Client testimonial cards ---- */
.ba-trust-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 38px; text-align: left;
}
.ba-trust-card {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 22px 22px 20px; box-shadow: var(--ba-shadow-sm); display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease;
}

.ba-trust-stars { color: #b45309; font-size: 14px; letter-spacing: 2px; line-height: 1; }
.ba-trust-card p { font-size: 13.5px; line-height: 1.6; color: var(--ba-body); flex: 1; margin: 0; }
.ba-trust-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--ba-line);
}
.ba-trust-foot > div { width: 100%; }
.ba-trust-foot strong { display: block; font-family: var(--ba-font-head); font-size: 13px; font-weight: 700; color: var(--ba-ink); margin-bottom: 1px; }
.ba-trust-foot span { display: block; font-size: 12px; color: var(--ba-body); }
.ba-trust-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: var(--ba-lav-100); color: var(--ba-purple);
  font-family: var(--ba-font-head); font-size: 10.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ba-lav-200);
  white-space: nowrap;
}

/* =========================================================================
   5. TESTIMONIAL
   ========================================================================= */
.ba-quote {
  max-width: 760px; margin: 36px auto 0; background: #fff; border: 1px solid var(--ba-line);
  border-radius: var(--ba-radius); padding: 36px 40px; box-shadow: var(--ba-shadow-sm); text-align: left;
}
.ba-quote .ba-name { font-family: var(--ba-font-head); font-weight: 700; color: var(--ba-purple); font-size: 18px; margin-bottom: 14px; }
.ba-quote p { font-size: 15.5px; color: var(--ba-body); }
.ba-quote-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.ba-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ba-lav-200); display: grid; place-items: center; color: var(--ba-purple); font-weight: 700; }
.ba-avatar svg { width: 24px; height: 24px; }
.ba-quote-foot strong { font-family: var(--ba-font-head); color: var(--ba-ink); display: block; font-size: 14px; }
.ba-quote-foot small { color: var(--ba-body); }
.ba-dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.ba-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ba-lav-200); }
.ba-dots i.on { background: var(--ba-purple); }

/* =========================================================================
   6. CLIENT SPOTLIGHT (purple)
   ========================================================================= */
.ba-spotlight { background: var(--ba-violet-band); color: #fff; padding: 84px 0; }
.ba-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ba-spotlight h2 { color: #fff; font-size: clamp(26px,3vw,34px); }
.ba-spotlight p { color: rgba(255,255,255,.85); margin-top: 16px; font-size: 15.5px; }
.ba-spotlight .ba-btn { margin-top: 26px; }
.ba-spot-card {
  background: linear-gradient(160deg,var(--brand-navy-700),var(--brand-blue)); border-radius: 18px; padding: 30px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.45);
}
.ba-spot-card .ba-spot-label { letter-spacing: .12em; font-family: var(--ba-font-head); font-weight: 700; font-size: 22px; color: #fff; }
.ba-spot-logo { background: #fff; border-radius: 12px; padding: 26px; margin-top: 18px; text-align: center; font-family: var(--ba-font-head); font-weight: 800; color: var(--ba-purple); font-size: 24px; }

/* =========================================================================
   7. CASE STUDIES
   ========================================================================= */
.ba-cases { background: var(--ba-lav-100); }
.ba-case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.ba-case {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 28px; box-shadow: var(--ba-shadow-sm); transition: transform .15s ease;
}

.ba-case-logo { height: 56px; display: grid; place-items: center; font-family: var(--ba-font-head); font-weight: 800; color: var(--ba-purple); font-size: 18px; border-bottom: 1px solid var(--ba-line); margin-bottom: 18px; }
.ba-case h3 { font-size: 17px; margin-bottom: 8px; }
.ba-case p { font-size: 14px; margin-bottom: 16px; }

/* =========================================================================
   7b. FAQ
   ========================================================================= */
/* One bordered stack — rows are separated by hairlines, not gaps, so the whole
   list reads as a single panel (matches the reference layout). */
.ba-faq { background: #fff; }
.ba-faq-list {
  max-width: 820px; margin: 40px auto 0; text-align: left;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  overflow: hidden;
  background: #fff;
}
.ba-faq-item { border-top: 1px solid var(--brand-line); padding: 0 26px; }
.ba-faq-item:first-child { border-top: none; }
.ba-faq-item[open] { background: #fff; }
.ba-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  list-style: none; cursor: pointer; padding: 20px 0;
  font-family: var(--ba-font-head); font-weight: 700; font-size: 15.5px; color: var(--brand-ink);
}
.ba-faq-item summary::-webkit-details-marker { display: none; }

/* Circular +/x control on the right of each row. */
.ba-faq-toggle {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-blue-50); color: var(--brand-blue);
  display: grid; place-items: center;
  transition: background .18s ease;
}
.ba-faq-toggle i {
  position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.ba-faq-toggle .bar-h { width: 11px; height: 2px; }
.ba-faq-toggle .bar-v { width: 2px; height: 11px; }
/* Open: rotate the vertical bar onto the horizontal one → a cross. */
.ba-faq-item[open] .ba-faq-toggle .bar-h { transform: translate(-50%,-50%) rotate(45deg); }
.ba-faq-item[open] .ba-faq-toggle .bar-v { transform: translate(-50%,-50%) rotate(45deg); }
.ba-faq-item summary:hover .ba-faq-toggle { background: #d7e6fb; }
.ba-faq-item summary:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; border-radius: 6px; }

.ba-faq-item p {
  font-size: 15px; line-height: 1.7; color: var(--brand-body);
  padding: 0 0 24px; max-width: 68ch; margin: 0;
}

/* =========================================================================
   8. SOFTWARE
   ========================================================================= */
.ba-soft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ba-soft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.ba-soft-col h3 { font-size: 16px; margin-bottom: 8px; color: var(--ba-purple); }
.ba-soft-col p { font-size: 14px; }
.ba-soft-media img { border-radius: var(--ba-radius); box-shadow: var(--ba-shadow); }

/* =========================================================================
   9. ACCESSIBILITY ECOSYSTEM
   ========================================================================= */
.ba-partner-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 40px; }
.ba-partner {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  padding: 28px; box-shadow: var(--ba-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ba-partner:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(13,14,22,.28); }
.ba-partner { text-align: center; }
.ba-partner-ic {
  width: 44px; height: 44px; border-radius: 11px; margin: 0 auto 14px;
  display: grid; place-items: center; background: var(--ba-lav-100); color: var(--ba-purple);
}
.ba-partner-ic svg { width: 22px; height: 22px; }
.ba-partner-name { font-family: var(--ba-font-head); font-weight: 700; color: var(--ba-ink); font-size: 16.5px; margin-bottom: 10px; }
.ba-partner p { font-size: 13.5px; margin-bottom: 0; }

/* =========================================================================
   10. FEATURED BLOG
   ========================================================================= */
.ba-blog { background: var(--ba-lav-50); }
.ba-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 40px; }
.ba-post {
  background: #fff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius);
  overflow: hidden; box-shadow: var(--ba-shadow-sm); transition: transform .15s ease;
}

.ba-post-img { aspect-ratio: 16/10; background: var(--ba-lav-200); object-fit: cover; width: 100%; }
.ba-post-body { padding: 22px 24px 26px; }
.ba-post-cat { font-size: 14px; font-weight: 600; color: var(--ba-purple); text-transform: uppercase; letter-spacing: .08em; font-family: var(--ba-font-head); }
.ba-post h3 { font-size: 17px; margin: 10px 0; line-height: 1.3; }
.ba-post p { font-size: 14px; margin-bottom: 14px; }
.ba-blog-foot { text-align: center; margin-top: 44px; }

/* =========================================================================
   11. CTA BAND
   ========================================================================= */
/* Full-bleed navy strip: headline + one line of copy on the left,
   the two actions pinned right. */
.ba-cta { background: var(--brand-navy); color: #fff; padding: 72px 0; }
.ba-cta-grid {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 48px; align-items: center;
}
.ba-cta h2 { color: #fff; font-size: clamp(28px,3.6vw,42px); letter-spacing: -.02em; }
.ba-cta-copy p {
  color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.6;
  margin-top: 16px; max-width: 46ch;
}
.ba-cta-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ba-cta-actions .ba-btn { margin-top: 0; }

/* =========================================================================
   Brand mark / logo
   ========================================================================= */
.ba-logo { display: inline-flex; align-items: center; }
.ba-logo img { height: 46px; width: auto; display: block; }
.ba-logo-sm img { height: 38px; }

/* Wordmark for dark sections (footer / CTA) where the full logo's
   navy text would disappear. Mirrors the logo's two-tone wordmark. */
.ba-wordmark { font-family: var(--ba-font-head); font-weight: 800; font-size: 26px; letter-spacing: -.01em; color: #fff; }
.ba-wordmark span { color: #9dc0f2; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .ba-hero-grid, .ba-band-grid, .ba-spot-grid, .ba-soft-grid, .ba-cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-compare-grid { grid-template-columns: 1fr; }
  .ba-h2-wide { max-width: none; }
  .ba-hero-mock { order: -1; }
  .ba-tiers { grid-template-columns: repeat(3,1fr); gap: 26px 20px; }
  .ba-logo-grid { grid-template-columns: repeat(4,1fr); }
  .ba-platform-grid { grid-template-columns: repeat(4,1fr); }
  .ba-svc2-grid { grid-template-columns: repeat(2,1fr); }
  .ba-why-grid, .ba-process-grid { grid-template-columns: repeat(2,1fr); }
  .ba-clients-grid { grid-template-columns: repeat(4,1fr); }
  .ba-trust-grid { grid-template-columns: repeat(2,1fr); }
  .ba-case-grid, .ba-partner-grid, .ba-blog-grid { grid-template-columns: repeat(2,1fr); }
  .ba-benefit-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .ba-section { padding: 56px 0; }
  .ba-tiers, .ba-logo-grid, .ba-clients-grid,
  .ba-case-grid, .ba-partner-grid, .ba-blog-grid,
  .ba-soft-cols, .ba-benefit-grid,
  .ba-why-grid, .ba-process-grid { grid-template-columns: 1fr; }
  .ba-platform-grid { grid-template-columns: repeat(2,1fr); }
  .ba-svc2-grid { grid-template-columns: 1fr; }
  .ba-clients-grid { grid-template-columns: repeat(2,1fr); }
  .ba-trust-grid { grid-template-columns: 1fr; }
  .ba-mock-body { flex-direction: column; align-items: flex-start; }
  .ba-compare-card { padding: 24px 22px 26px; }
  .ba-why-trust li { padding: 0 14px; font-size: 13px; }
  .ba-cta-actions .ba-btn { flex: 1; justify-content: center; }
}

/* Get a custom quote — white label on teal */
.ba-home .ba-btn-primary { color: #fff !important; }

/* Light buttons on dark bands — teal label, kabhi blank na ho */
.ba-home .ba-band      .ba-btn-light,
.ba-home .ba-cta       .ba-btn-light,
.ba-home .ba-spotlight .ba-btn-light {
  background: #fff;
  color: var(--brand-navy) !important;
}


/* =========================================================================
   SITE FOOTER
   ========================================================================= */

.alu-footer {
  --alu-line:  rgba(255,255,255,.13);
  --alu-muted: #b6c2d1;

  background: var(--brand-navy);
  color: var(--alu-muted);
  font-family: var(--brand-font-body);
}
.alu-footer-inner { max-width: 1280px; margin: 0 auto; padding: 72px 28px 28px; }

/* Wide brand column, then three equal link columns. */
.alu-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

/* brand block */
.alu-foot-brand { max-width: 340px; }
.alu-foot-brand img,
.alu-foot-brand .custom-logo { height: 40px; width: auto; max-width: none; display: block; margin-bottom: 20px; }
.alu-foot-brand p { font-size: 14.5px; line-height: 1.7; color: var(--alu-muted); margin: 0 0 20px; }

.alu-foot-contact { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.alu-foot-contact a {
  font-family: var(--brand-font-body); font-weight: 500; font-size: 14.5px;
  color: var(--alu-muted); text-decoration: none; transition: color .15s ease;
}
.alu-foot-contact a:hover { color: #fff; }

/* link columns */
.alu-foot-heading {
  font-family: var(--brand-font-body);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brand-blue-on-dark);
  margin: 0 0 18px;
}
.alu-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.alu-foot-col a { font-size: 14.5px; color: var(--alu-muted); text-decoration: none; transition: color .15s ease; }
.alu-foot-col a:hover { color: #ffffff; }

/* "All services →" tail link */
.alu-foot-more {
  display: inline-block; margin-top: 14px;
  font-family: var(--brand-font-head); font-weight: 600; font-size: 14px;
  color: #ffffff; text-decoration: none;
}
.alu-foot-more:hover { color: #9dc0f2; }

/* social — lives in the brand column */
.alu-foot-social { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.alu-foot-social li { margin: 0; }
.alu-foot-social a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--alu-line); color: #ffffff;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.alu-foot-social a:hover { background: var(--brand-red); border-color: var(--brand-red); transform: translateY(-2px); }
.alu-foot-social svg { width: 16px; height: 16px; }

/* bottom bar */
.alu-foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--alu-line);
}
.alu-foot-copy { font-size: 13.5px; color: var(--alu-muted); margin: 0; }
.alu-foot-meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.alu-foot-meta a {
  font-size: 13.5px;
  color: var(--alu-muted);
  text-decoration: none;
  transition: none;
}
/* Hover: underline so the state change does not rely on colour alone. */
.alu-foot-meta a:hover,
.alu-foot-col a:hover,
.alu-foot-contact a:hover,
.alu-foot-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.alu-foot-meta a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.alu-foot-conf { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--alu-muted); margin: 0; }
/* Small blue dot marking the conformance claim. */
.alu-foot-conf-dot { width: 7px; height: 7px; border-radius: 50%; background: #4d8ee5; flex: none; }

/* responsive */
@media (max-width: 980px) {
  .alu-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .alu-foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .alu-foot-grid { grid-template-columns: 1fr; }
  .alu-foot-bottom { flex-direction: column; align-items: flex-start; }
  .alu-foot-meta { gap: 14px; }
}

/* =========================================================================
   HOMEPAGE — SECTION SEPARATION + HERO/PRICING + REVIEW HIGHLIGHT
   ========================================================================= */
/* 1. HERO / BANNER — a properly coloured band, not a white one.
      The header is white; the banner has to be visibly a different surface or
      the two read as a single slab. --brand-banner drives the colour, so it
      can be changed in one place. */
.ba-home .ba-hero {
  background:
    radial-gradient(880px 420px at 86% -14%, rgba(22,104,214,.13) 0%, rgba(22,104,214,0) 60%),
    linear-gradient(175deg, var(--brand-banner) 0%, var(--brand-banner-2) 100%);
  border-bottom: 1px solid var(--brand-line-strong);
  box-shadow:none;
  padding: 60px 0 76px;
  position:relative; z-index:1;
}

/* 2. PRICING — full white + professional text */
.ba-home .ba-pricing .ba-h2 {
  color:var(--brand-ink); font-size:clamp(32px,4vw,46px);
  font-weight:700; letter-spacing:-.025em; line-height:1.06; text-wrap:balance;
}
.ba-home .ba-pricing .ba-lead {
  color:var(--brand-body); font-size:17px; line-height:1.65; max-width:560px;
  margin:18px auto 0; text-wrap:pretty;
}

/* =========================================================================
   3. SECTION RHYTHM
   The page has no dividing rules — separation comes purely from alternating
   surfaces. So NO two adjacent sections may share a background. The list
   below is the running order of the homepage; keep it alternating if you
   add, remove or reorder a section.
   ========================================================================= */
.ba-home .ba-services2   { background:#ffffff; }              /* 3  */
.ba-home .ba-compare     { background:var(--brand-surface); }  /* 4  */
.ba-home .ba-why         { background:#ffffff; }               /* 5  */
.ba-home .ba-process     { background:var(--brand-surface); }  /* 6  */
.ba-home .ba-pricing     { background:#ffffff; }               /* 7  */
/*                         .ba-band = navy                        8  */
.ba-home .ba-testimonials{ background:var(--brand-surface); }  /* 9  */
/*                         .ba-spotlight = navy                  10  */
.ba-home .ba-cases       { background:#ffffff; }               /* 11 */
.ba-home .ba-software    { background:var(--brand-surface); }  /* 12 */
.ba-home .ba-logos-band  { background:#ffffff; }               /* 13 */
.ba-home .ba-industries  { background:var(--brand-surface); }  /* 14 */
.ba-home .ba-blog        { background:#ffffff; }               /* 15 */
.ba-home .ba-standards   { background:var(--brand-surface); border-top:none; border-bottom:none; } /* 16 */
.ba-home .ba-faq         { background:#ffffff; }               /* 17 */
/*                         .ba-cta = navy                       18  */

/* 4. CLIENT REVIEW — quote card highlight / pop */
.ba-home .ba-quote {
  border:1px solid var(--brand-line);
  border-top:4px solid var(--brand-red);
  box-shadow:var(--brand-shadow);
  padding:52px 44px 36px;
}
.ba-home .ba-quote::before {
  content:"\201C";
  position:absolute; top:10px; left:34px;
  font-family:Georgia,'Times New Roman',serif; font-size:96px; line-height:1;
  color:var(--brand-surface-2); pointer-events:none;
}
.ba-home .ba-quote .ba-name { font-size:19px; }
.ba-home .ba-quote p { font-size:16.5px; line-height:1.7; color:var(--ba-ink); }

/* ── Global fix: ba-btn-light on ANY dark section ── */
[class*="ba-violet"] .ba-btn-light,
[class*="blg-cta"]   .ba-btn-light,
[class*="sng-"]      .ba-btn-light,
[class*="alu-"]      .ba-btn-light,
.ba-band             .ba-btn-light,
.ba-spotlight        .ba-btn-light,
.ba-cta              .ba-btn-light {
  background: #ffffff !important;
  color: var(--brand-navy)   !important;
}

/* =========================================================================
   HOMEPAGE — SEMANTIC MARKUP + ACCESSIBILITY
   The homepage uses real list / definition-list / figure elements rather than
   generic divs. These rules strip the browser defaults those elements bring
   and restore the intended visual design, plus set the focus indicators.
   Everything below is WCAG 2.2 AA relevant — do not remove it to "tidy up".
   ========================================================================= */

/* --- Section labels that became real headings -------------------------
   These are <h2> now, so `.ba-home h2 { color: var(--ba-ink) }` would win on
   specificity and paint the navy strip's label near-black on navy. Restate the
   colour at the same weight so both strips stay readable. */
.ba-home .ba-platforms-label,
.ba-home .ba-standards-label { margin: 0 0 18px; font-weight: 600; }
.ba-home .ba-platforms-label { color: rgba(255,255,255,.78); }
.ba-home .ba-standards-label { color: var(--brand-body); }

/* --- Lists that carry layout ------------------------------------------ */
.ba-platform-grid,
.ba-standards-row,
.ba-industry-grid,
.ba-process-grid,
.ba-hero-trust,
.ba-mock-pour,
.ba-mock-checks,
.ba-why-trust,
.ba-compare-card ul,
.ba-tier-feats { list-style: none; margin-left: 0; padding-left: 0; }

.ba-process-grid { counter-reset: none; }
.ba-industry-grid > li { display: flex; }

/* --- Service card: icon is now a <span> ------------------------------- */
.ba-svc2-ic { display: grid; place-items: center; }

/* --- Compare rows: ticks/crosses are wrapped in a <span> -------------- */
.ba-compare-card li .ba-x,
.ba-compare-card li .ba-tick { display: inline-flex; flex: none; margin-top: 3px; }
.ba-compare-card li .ba-x svg,
.ba-compare-card li .ba-tick svg { width: 17px; height: 17px; }
.ba-compare-card li .ba-x    { color: var(--brand-red); }
.ba-compare-card li .ba-tick { color: var(--brand-blue); }

/* --- Process number is a <span> now ----------------------------------- */
.ba-process-card .ba-process-n { display: grid; place-items: center; }

/* --- Stats became a <dl> ---------------------------------------------- */
.ba-stat-card dl,
.ba-stat-card { margin: 0; }
.ba-stat dt {
  display: block; font-family: var(--brand-font-head); font-weight: 800;
  font-size: 30px; color: #fff; line-height: 1.1;
}
.ba-stat dd {
  display: block; margin: 4px 0 0;
  font-size: 13.5px; color: rgba(255,255,255,.8);
}

/* --- Testimonials became <figure> / <blockquote> ---------------------- */
.ba-trust-card { margin: 0; }
.ba-trust-card blockquote { margin: 0; flex: 1; }
.ba-trust-card blockquote p { font-size: 13.5px; line-height: 1.6; color: var(--brand-body); margin: 0; }
.ba-trust-who { display: block; width: 100%; }
.ba-trust-who strong {
  display: block; font-family: var(--brand-font-head); font-size: 13px;
  font-weight: 700; color: var(--brand-ink); margin-bottom: 1px;
}
.ba-trust-who span { display: block; font-size: 12px; color: var(--brand-body); }
.ba-trust-stars { margin: 0; }

/* --- Case cards / spotlight text blocks became <p> -------------------- */
.ba-case-logo, .ba-spot-label, .ba-spot-logo, .ba-post-cat { margin: 0; }

/* "Case study coming soon" is NOT a link. It inherits .ba-link, so without
   this it renders blue and bold — indistinguishable from the real links
   around it, and users click something that does nothing. Mute it and
   restore the default cursor. */
.ba-link-soon {
  color: var(--brand-body);
  font-weight: 500;
  font-style: italic;
  cursor: default;
  pointer-events: none;
}
.ba-cases-foot { margin-top: 40px; }
.ba-blog-foot  { margin-top: 44px; }
.ba-soft-cta   { margin-top: 26px; }

/* --- Blog headline is now a link -------------------------------------- */
.ba-post h3 a { color: inherit; }
.ba-post h3 a:hover { color: var(--brand-blue); }

/* =========================================================================
   FOCUS VISIBILITY  (WCAG 2.4.7 / 2.4.11)
   Every interactive element gets a thick, high-contrast ring. Keyboard users
   must always be able to see where they are.
   ========================================================================= */
.ba-home a:focus-visible,
.ba-home button:focus-visible,
.ba-home summary:focus-visible,
.alu-header a:focus-visible,
.alu-header button:focus-visible,
.alu-footer a:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On navy surfaces a blue ring would disappear — go white instead. */
.ba-band a:focus-visible,
.ba-spotlight a:focus-visible,
.ba-cta a:focus-visible,
.ba-platforms a:focus-visible,
.alu-footer a:focus-visible,
.prc-hero a:focus-visible {
  outline-color: #ffffff;
}

/* Card-sized links: ring the whole card, not just the text. */
.ba-svc2-card:focus-visible,
.ba-industry-pill:focus-visible,
.ba-tier-cta:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; }

/* =========================================================================
   REDUCED MOTION  (WCAG 2.3.3)
   Hover lifts and transitions are decorative; honour the OS setting.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ba-home *,
  .alu-header *,
  .alu-footer * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ba-svc2-card:hover,
  .ba-tier:hover,
  .ba-partner:hover,
  .ba-industry-pill:hover,
  .alu-foot-social a:hover { transform: none; }
}

/* =========================================================================
   FORCED COLORS / WINDOWS HIGH CONTRAST
   Icon-only affordances are drawn with backgrounds, which high-contrast mode
   strips. Give them a border so they stay visible.
   ========================================================================= */
@media (forced-colors: active) {
  .ba-faq-toggle,
  .ba-tier-badge,
  .ba-mock-pill { border: 1px solid currentColor; }
  .ba-btn { border: 1px solid currentColor; }
}



/* =========================================================================
   NAV DISCLOSURE BUTTONS  (Services / Solutions)

   These are <button>s, not links: they open a panel rather than navigate.
   The Underscores base styles give every button a grey box, so each of those
   properties is reset here; appearance:none removes iOS/Safari chrome.
   ========================================================================= */
.alu-nav .alu-nav-toggle,
.alu-nav #primary-menu > li > .alu-nav-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--brand-font-head);
  font-weight: 500;
  font-size: 15px;
  line-height: inherit;
  color: var(--brand-ink);
  white-space: nowrap;      /* text aur chevron kabhi wrap na hon */
  cursor: pointer;
  transition: color .15s ease;
}

/* Neutralise the Underscores button:hover/focus box styles. */
.alu-nav .alu-nav-toggle:hover,
.alu-nav .alu-nav-toggle:focus,
.alu-nav .alu-nav-toggle:active {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.alu-nav .alu-nav-toggle:hover { color: var(--brand-blue); }

.alu-nav .alu-nav-toggle:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Chevron size is locked here as well as in the SVG attributes. */
.alu-nav .alu-nav-toggle .alu-chev {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  display: block;
  transition: transform .2s ease;
}
.alu-nav .alu-nav-toggle[aria-expanded="true"] .alu-chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .alu-nav .alu-nav-toggle .alu-chev { transition: none; }
}


/* =========================================================================
   NAV DISCLOSURE BUTTON — icon-only layout
   The submenu button sits right after its link. 32x32 hit area on desktop,
   44x44 on touch layouts (WCAG 2.5.8).
   ========================================================================= */
@media (min-width: 1081px) {
  .alu-nav #primary-menu > li.menu-item-has-children {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
}
.alu-nav .alu-nav-toggle,
.alu-nav #primary-menu > li > .alu-nav-toggle {
  gap: 0;
  padding: 0;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
  flex: 0 0 auto;
}
.alu-nav .alu-nav-toggle .alu-chev { pointer-events: none; }
.alu-nav .alu-nav-toggle:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: -2px;
  border-radius: 6px;
}
@media (max-width: 1080px) {
  .alu-nav #primary-menu > li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .alu-nav #primary-menu > li.menu-item-has-children > a {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .alu-nav .alu-nav-toggle,
  .alu-nav #primary-menu > li > .alu-nav-toggle {
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
  .alu-nav #primary-menu > li.menu-item-has-children > ul { flex: 1 0 100%; }
}

/* Current page in the menu: underline, not colour alone (WCAG 1.4.1). */
.alu-nav #primary-menu > li > a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.alu-mega-item > a[aria-current="page"] { background: var(--brand-blue-50); }
.alu-mega-item > a:hover .alu-mi-title,
.alu-mega-foot > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.alu-mega-item > a:focus-visible,
.alu-mega-foot > a:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
}

/* =========================================================================
   BACK TO TOP
   ========================================================================= */
.alu-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 900;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-navy);
  color: #ffffff;
  box-shadow: 0 6px 18px -6px rgba(16, 24, 40, .45);
  border: 2px solid #ffffff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .15s;
}
.alu-back-to-top svg { width: 22px; height: 22px; }
.alu-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.alu-back-to-top:hover { background: var(--brand-red-600); color: #ffffff; }
/* Two-tone ring stays visible on both light and dark sections. */
.alu-back-to-top:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .alu-back-to-top { transition: none; transform: none; }
}
@media (forced-colors: active) {
  .alu-back-to-top { border: 2px solid ButtonText; }
}
@media print {
  .alu-back-to-top, .alu-burger, .alu-nav-toggle { display: none !important; }
}

/* =========================================================================
   FORM FEEDBACK — shared by Contact, Free Assessment and Report an Issue
   (markup from inc/forms.php and js/theme.js)
   ========================================================================= */
.alu-form-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 2px solid currentColor;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.55;
}
.alu-form-notice > svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.alu-form-notice p { margin: 4px 0 0; color: var(--brand-ink); }
.alu-form-notice ul { margin: 10px 0 0; padding-left: 20px; }
.alu-form-notice li { margin: 4px 0; color: var(--brand-ink); }
.alu-form-notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.alu-form-notice-title { margin: 0; font-size: 17px; line-height: 1.35; color: inherit; font-family: var(--brand-font-head); }
.alu-form-notice:focus { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.alu-form-notice--success { color: #0b6b3a; background: #effaf3; }
.alu-form-notice--error   { color: var(--brand-red-text); background: var(--brand-red-50); }

.alu-field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-red-text);
}
.alu-field-error-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-red-text);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--brand-red-text) !important;
  border-width: 2px !important;
}

.alu-form-required-note { font-size: 14px; color: var(--brand-muted); margin: 0 0 16px; }
.alu-form-required-note .req { color: var(--brand-red-text); font-weight: 700; }

/* Honeypot: off-screen for sighted users, aria-hidden and tabindex=-1 in markup. */
.alu-form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (forced-colors: active) {
  .alu-form-notice { border: 2px solid CanvasText; }
  .alu-field-error-icon { forced-color-adjust: none; }
}

/* =========================================================================
   REDUCED MOTION — site-wide
   Template stylesheets add transitions and entrance animations; honour the
   operating-system setting everywhere, not just on the homepage.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard-scrollable regions (wide tables) show focus too. */
[role="region"][tabindex="0"]:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }

/* Mobile mega panel: use the full width so item titles do not wrap early. */
@media (max-width: 1080px) {
  .alu-nav #primary-menu > li.menu-item-has-children > ul.alu-mega { width: 100%; box-sizing: border-box; }
  .alu-mega-item > a { width: 100%; box-sizing: border-box; }
  .alu-mi-title { flex: 1 1 auto; min-width: 0; }
}

/* Footer on a light background (e.g. made white via Additional CSS):
   dark headings/text and blue focus rings so contrast stays AA. */
.alu-footer.is-light { --alu-muted: #475467; --alu-line: #e4e8ef; }
.alu-footer.is-light .alu-foot-heading { color: var(--brand-blue-600); }
.alu-footer.is-light .alu-foot-col a,
.alu-footer.is-light .alu-foot-contact a,
.alu-footer.is-light .alu-foot-meta a { color: var(--brand-ink); }
.alu-footer.is-light .alu-foot-more { color: var(--brand-navy); }
.alu-footer.is-light .alu-foot-social a { color: var(--brand-navy); border-color: #cfd6e0; }
.alu-footer.is-light .alu-foot-social a:hover { color: #fff; }
.alu-footer.is-light a:focus-visible { outline-color: var(--brand-focus); }

/* Bottom bar: keep links clear of the fixed back-to-top button and aligned. */
.alu-foot-bottom { padding-right: 76px; align-items: center; }
.alu-foot-meta { align-items: center; row-gap: 10px; }
.alu-foot-meta a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 560px) {
  .alu-foot-bottom { padding-right: 0; padding-bottom: 64px; }
}