/* ==========================================================================
   Cubix Style — site redesign (desktop styles)
   --------------------------------------------------------------------------
   Loaded on every page, after custom.css. Responsive rules live in
   cubix-responsive.css (loaded after this file). Full rules: README.md

   RULES
   1. Colors  — use ONLY the color tokens in "01. Global > Colors".
                Never write a hex / rgb value anywhere else.
                For transparency use the *-rgb tokens:
                    rgba(var(--color-black-rgb), 0.5)
   2. Fonts   — use ONLY the font tokens in "01. Global > Fonts".
   3. Sections — one block per section. A section's rules stay inside its
                own block; never style one section from another's block.
   4. Sizes   — desktop sizes are "design px" measured on a 1920px screen:
                    calc(N * var(--u))
                From 1200px to 1919px --u shrinks with the screen, so the
                layout scales down evenly. At 1920px+ and below 1200px,
                --u = 1px (tablet / mobile sizes: cubix-responsive.css).

   Contents
   01. Global   (colors, fonts, scaling, typography, button)
   02. Header
   03. Hero
   04. Clients (home page)
   05. About (home page)
   06. Home side decorations
   07. Products (home page)
   08. Services (home page)
   09. Section titles (all pages)
   10. Feature / Our Solutions (home page)
   11. Why Choose Us (home page)
   12. Testimonials (home page)
   13. Footer (all pages)
   14. Preloader (all pages)
   15. Back to top (all pages)
   16. Page header (inner pages)
   17. Contact page
   18. About page
   19. Services page
   20. Full-screen menu (all pages)
   21. FAQ page
   ========================================================================== */


/* ==========================================================================
   Font loading — the ONLY place fonts are loaded for the whole site.
   (CSS requires @import to be at the top of the file, before any rule.)
   To add / change a Google font: edit this URL, then set the matching
   --font-* token in "01. Global > Fonts".
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Oswald:wght@200..700&display=swap");


/* ==========================================================================
   01. Global
   ========================================================================== */

:root{

	/* ---------- Colors: change a color here, it changes on the whole site ---------- */
	--color-primary        : #010535;    /* dark navy */
	--color-accent         : #62a9e1;    /* blue */
	--color-accent-2       : #e61088;    /* pink */
	--color-white          : #FFFFFF;
	--color-black          : #000000;
	--color-text           : #707070;    /* body text grey */
	--color-light          : #F2F2F5;    /* light grey background */

	/* Same colors as "R, G, B" — for transparency: rgba(var(--color-white-rgb), 0.1)
	   Keep these in sync with the hex values above. */
	--color-primary-rgb    : 1, 5, 53;
	--color-accent-rgb     : 98, 169, 225;
	--color-accent-2-rgb   : 230, 16, 136;
	--color-white-rgb      : 255, 255, 255;
	--color-black-rgb      : 0, 0, 0;

	/* Brand gradient (blue → pink) */
	--gradient-brand       : linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-2) 100%);

	/* ---------- Fonts: change a font here, it changes on the whole site ---------- */
	--font-body            : "Plus Jakarta Sans", sans-serif;                        /* paragraphs, general text */
	--font-heading         : "Oswald", sans-serif;                                  /* h1 – h6 */
	--font-display         : "Oswald", sans-serif;                                  /* big hero / section titles */
	--font-menu            : "Plus Jakarta Sans", sans-serif;                        /* header menu */
	--font-button          : "Plus Jakarta Sans", sans-serif;                        /* buttons */

	/* ---------- Scaling (see rule 4 above) ---------- */
	--u                    : 1px;                          /* 1 design px */
	--container-w          : calc(1300 * var(--u));        /* 1300px on a 1920px screen */

	/* ---------- Template variables (custom.css) now read from the tokens above ---------- */
	--primary-color          : var(--color-primary);
	--secondary-color        : var(--color-light);
	--text-color             : var(--color-text);
	--accent-color           : var(--color-accent);
	--accent-secondary-color : var(--color-accent-2);
	--white-color            : var(--color-white);
	--default-font           : var(--font-body);
}

/* 1200px – 1919px: scale everything with the screen width */
@media (min-width: 1200px) and (max-width: 1919.98px){
	:root{
		--u: calc(100vw / 1920);
	}
}

/* ---------- Font files ----------
   Plus Jakarta Sans + Oswald: Google Fonts @import at the top of this file (no other font files). */

/* ---------- Typography: connects the font tokens to the page ---------- */
body{
	font-family: var(--font-body);
	word-spacing: 0.06em;                /* Plus Jakarta Sans sets words a little tight: a touch more space */
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--font-heading);
}

/* Oswald text keeps its own word spacing (the extra space above is for the body font only):
   all headings + the few other places that use the heading / display font */
h1, h2, h3, h4, h5, h6,
.home-side-word,
.home-side-label,
.showcase .side p,
.showcase dd,
.wcu-props b,
.wcu-props-badge,
.wcu-deploy b,
.cx-preloader-letters{
	word-spacing: normal;
}

button{
	font-family: var(--font-button);
}

.main-menu,
.slicknav_nav{
	font-family: var(--font-menu);
}

/* Display titles: hero heading + home page section titles (upright, no italic) */
#homepage-hero-content h1,
h2.nm-heading.nm-heading{             /* doubled class beats ".showcase .heading h2" */
	font-family: var(--font-display);
	font-weight: 700;
	font-style: normal;
}

/* ---------- Button: the ONE button design of the whole site ----------
   Use:  <a href="contact.html" class="btn-default">Talk To Us</a>
   Only the text and the link change. Do not create other button styles,
   and do not resize / recolor .btn-default inside a section block.
   (.btn-highlighted is an old template variant; it now looks the same.) */
.btn-default,
.btn-default.btn-highlighted{
	position: relative;
	display: inline-block;
	z-index: 0;
	overflow: hidden;
	padding: calc(17 * var(--u)) calc(60 * var(--u)) calc(17 * var(--u)) calc(30 * var(--u));
	border: none;
	border-radius: 100px;
	background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent-2) 50%, var(--color-accent) 100%);
	background-size: 200% auto;
	box-shadow: 0 8px 24px rgba(var(--color-accent-2-rgb), 0.25);
	color: var(--color-white);
	font-family: var(--font-button);
	font-size: calc(18 * var(--u));
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	transition: background-position 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.btn-highlighted:hover{
	background-position: right center;
	box-shadow: 0 10px 30px rgba(var(--color-accent-2-rgb), 0.4);
	color: var(--color-white);
}

/* Arrow icon (Font Awesome "circle arrow right") */
.btn-default::before,
.btn-default.btn-highlighted::before{
	content: '\f0a9';
	position: absolute;
	top: 50%;
	right: 0;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: calc(20 * var(--u));
	color: var(--color-white);
	transform: translate(calc(-30 * var(--u)), -50%);
	transition: transform 0.4s ease-in-out;
}

.btn-default:hover::before,
.btn-default.btn-highlighted:hover::before{
	color: var(--color-white);
	transform: translate(calc(-27 * var(--u)), -50%);
}

/* Old template fill effect of .btn-highlighted: not used */
.btn-default.btn-highlighted::after{
	display: none;
}


/* ==========================================================================
   02. Header
   ========================================================================== */

/* ---------- Bar ---------- */
header.main-header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background: transparent;
	border-bottom: 1px solid rgba(var(--color-white-rgb), 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Glass background sits on a layer behind the content,
   so the dropdown menu can blur the page on its own */
header.main-header::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(var(--color-black-rgb), 0.45);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	transition: background-color 0.35s ease;
}

/* Scrolled: darker glass + shadow */
header.main-header.is-scrolled{
	box-shadow: 0 10px 30px rgba(var(--color-black-rgb), 0.35);
}

header.main-header.is-scrolled::before{
	background: rgba(var(--color-black-rgb), 0.85);
}

/* Scrolling down: slide the header away */
header.main-header.is-hidden{
	transform: translateY(-100%);
}

.main-header .container{
	max-width: var(--container-w);
}

.main-header .navbar{
	padding: calc(20 * var(--u)) 0;
	transition: padding 0.35s ease;
}

.main-header.is-scrolled .navbar{
	padding: calc(12 * var(--u)) 0;
}

/* ---------- Logo ---------- */
.main-header .navbar-brand img{
	max-width: calc(160 * var(--u));
	transition: max-width 0.35s ease;
}

.main-header.is-scrolled .navbar-brand img{
	max-width: calc(140 * var(--u));
}

/* ---------- Menu links ---------- */
.main-header .main-menu .nav-menu-wrapper{
	margin: 0 calc(20 * var(--u));
}

.main-header .main-menu ul li a{
	position: relative;
	font-size: calc(16 * var(--u));
	padding: calc(14 * var(--u)) calc(20 * var(--u)) !important;   /* custom.css uses !important */
	color: rgba(var(--color-white-rgb), 0.85);
}

/* Gradient underline (top level only) */
.main-header .main-menu .nav-menu-wrapper > ul > li > a::before{
	content: '';
	position: absolute;
	left: calc(20 * var(--u));
	right: calc(20 * var(--u));
	bottom: calc(10 * var(--u));
	height: 2px;
	border-radius: 2px;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.main-header .main-menu .nav-menu-wrapper > ul > li > a:hover,
.main-header .main-menu .nav-menu-wrapper > ul > li > a:focus,
.main-header .main-menu .nav-menu-wrapper > ul > li > a.is-active,
.main-header .main-menu .nav-menu-wrapper > ul > li:hover > a{
	color: var(--color-white);
}

.main-header .main-menu .nav-menu-wrapper > ul > li > a:hover::before,
.main-header .main-menu .nav-menu-wrapper > ul > li > a:focus::before,
.main-header .main-menu .nav-menu-wrapper > ul > li > a.is-active::before,
.main-header .main-menu .nav-menu-wrapper > ul > li:hover > a::before{
	transform: scaleX(1);
}

/* ---------- Book Demo button ---------- */
/* Uses the site button (01. Global > Button) as is. */

/* Mobile copy of the button (added by js/function.js), hidden on desktop */
.main-header .header-btn-mobile{
	display: none;
}


/* ==========================================================================
   03. Hero
   --------------------------------------------------------------------------
   HTML: index.html <section class="hero_rev">
   JS:   js/hero-intro.js (text carousel + entrance), js/hero-particles.js
   Layers, back to front:
     0 logo video  1 dark overlay  2 particles  3 glow  4 content  20 scroll-down
   ========================================================================== */

.hero_rev{
	background: var(--color-black);
}

/* Full screen height on every screen */
.first-screen .hero_rev{
	height: 100vh;
	height: 100svh;                      /* phones: the height that stays visible with the browser bars shown */
	min-height: 0;                       /* custom.css had a 500px minimum */
}

/* Logo video: always the full hero height. Width follows the video's own shape:
   on wide screens the edges fade into the black (custom.css mask),
   on narrow screens the sides are cut off (centred). */
.first-screen .hero_rev video{
	height: 100%;
	width: auto;
	max-width: none;
	transition: opacity 0.8s ease;
}

/* the video loads after the page (js/hero-intro.js): hidden until it plays, then fades in */
.first-screen .hero_rev video:not(.is-ready){
	opacity: 0;
}

/* ---------- Background layers ---------- */
.hero_rev .hero-particles{
	position: absolute;
	inset: 0;
	z-index: 2;                          /* above the overlay, so the network stays clearly visible */
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Darker on the left, so the text always reads over the logo video (darkens the video only) */
.hero_rev .hero-overlay{
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(var(--color-black-rgb), 0.8) 0%,
		rgba(var(--color-black-rgb), 0.55) 40%,
		rgba(var(--color-black-rgb), 0.35) 100%);
}

/* Soft light behind each heading line (positions: js/hero-intro.js) */
.hero_rev .hero-net-glow{
	z-index: 3;
	opacity: 0.6;
}

.hero_rev .hero-net-glow i:nth-child(1),
.hero_rev .hero-net-glow i:nth-child(2){
	--c: var(--color-accent-rgb);
}

.hero_rev .hero-net-glow i:nth-child(3){
	--c: var(--color-accent-2-rgb);
}

/* ---------- Content ---------- */
#homepage-hero-content{
	display: none;                       /* js/hero-intro.js shows it after the page loads */
}

.first-screen .hero_rev #homepage-hero-content{
	position: absolute;
	z-index: 4;
	top: calc(50% + 45 * var(--u));      /* centred in the space under the header */
	left: max(15px, calc((100% - var(--container-w)) / 2 + 15px));   /* same left edge as the header logo */
	width: calc(680 * var(--u));
	max-width: calc(100% - 30px);
	transform: translateY(-50%);
}

.first-screen .hero_rev #homepage-hero-content h1{
	margin: 0;
	font-size: calc(64 * var(--u));
	line-height: 1.15;
}

.first-screen .hero_rev #homepage-hero-content .hero-desc{
	max-width: calc(560 * var(--u));
	margin: calc(18 * var(--u)) 0 0;
	color: var(--color-white);
	font-size: calc(18 * var(--u));
	line-height: 1.6;
}

/* Button + Oracle badge */
.first-screen .hero_rev #homepage-hero-content .hero-action-row{
	gap: calc(20 * var(--u));
	margin-top: calc(32 * var(--u));
}

.first-screen .hero_rev #homepage-hero-content .hero-action-row .btn-default{
	width: auto;                         /* sizes to its text like every button */
}

.first-screen .hero_rev #homepage-hero-content .hero-action-row .hero-opera-badge{
	width: calc(170 * var(--u)) !important;   /* custom.css sets the width with !important */
	filter: drop-shadow(0 10px 14px rgba(var(--color-black-rgb), 0.28));
}

/* ---------- Text slider (Swiper, fade effect: js/hero-intro.js) ---------- */
.first-screen .hero_rev #homepage-hero-content .hero-slides{
	overflow: visible;                   /* the line entrance starts 48px to the left: don't clip it */
}

/* Outgoing slide: blurs and drifts left while Swiper fades it out.
   Swiper's fade animates "opacity" and sets the duration itself (speed in js/hero-intro.js),
   so only the properties are listed here. */
.hero_rev .hero-slide{
	transition-property: opacity, filter, translate;
	transition-timing-function: ease;
}

.hero_rev .hero-slide:not(.swiper-slide-active){
	filter: blur(6px);
	translate: -24px 0;
	pointer-events: none;
}

/* Hidden slides hold no animation, so becoming active replays the line-by-line entrance */
.hero_rev.is-playing #homepage-hero-content .hero-slide:not(.swiper-slide-active) .hero-line,
.hero_rev.is-playing #homepage-hero-content .hero-slide:not(.swiper-slide-active) .hero-desc{
	animation: none;
}

/* After the first slide, the next ones enter a little quicker */
.hero_rev.is-playing #homepage-hero-content.is-cycling .swiper-slide-active .hero-line:nth-child(1){ animation-delay: 0.10s; }
.hero_rev.is-playing #homepage-hero-content.is-cycling .swiper-slide-active .hero-line:nth-child(2){ animation-delay: 0.22s; }
.hero_rev.is-playing #homepage-hero-content.is-cycling .swiper-slide-active .hero-line:nth-child(3){ animation-delay: 0.34s; }
.hero_rev.is-playing #homepage-hero-content.is-cycling .swiper-slide-active .hero-desc{ animation-delay: 0.55s; }

/* Slide dots (Swiper pagination: <button class="hero-dot">) */
.first-screen .hero_rev #homepage-hero-content .hero-dots{
	display: flex;
	gap: calc(10 * var(--u));
	margin-top: calc(28 * var(--u));
}

.hero_rev.is-playing #homepage-hero-content .hero-dots{
	animation: heroRise 0.8s var(--intro-ease) 1.5s both;
}

.first-screen .hero_rev #homepage-hero-content .hero-dot{
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(var(--color-white-rgb), 0.35);
	cursor: pointer;
	transition: width 0.35s var(--intro-ease), background 0.35s ease;
}

.first-screen .hero_rev #homepage-hero-content .hero-dot:hover{
	background: rgba(var(--color-white-rgb), 0.6);
}

.first-screen .hero_rev #homepage-hero-content .hero-dot.is-active{
	width: calc(28 * var(--u));
	background: var(--gradient-brand);
}

/* Heading: white parts */
.first-screen .hero_rev #homepage-hero-content h1 .hero-plain,
.first-screen .hero_rev #homepage-hero-content h1 .hero-split{
	color: var(--color-white);
	-webkit-text-fill-color: var(--color-white);
}

/* ---------- Scroll down ---------- */
.hero_rev .hero-scroll-down{
	bottom: calc(16 * var(--u));
	width: calc(110 * var(--u));
	height: calc(110 * var(--u));
}

.hero_rev .hero-scroll-ring text{
	fill: var(--color-white);
	font-size: 12px;                     /* SVG text: scales with the ring */
	letter-spacing: 1.6px;               /* "PRESS TO SCROLL" is longer than the old "SCROLL DOWN": fits the arc */
}

.hero_rev .hero-scroll-ring{
	filter: drop-shadow(0 0 4px rgba(var(--color-white-rgb), 0.75)) drop-shadow(0 0 12px rgba(var(--color-white-rgb), 0.35));
}

.hero_rev .hero-scroll-mouse{
	width: calc(32 * var(--u));
	height: calc(62 * var(--u));
	margin-top: calc(12 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--color-black);
	border-color: var(--color-white);
}

.hero_rev .hero-scroll-mouse svg{
	width: calc(12 * var(--u));
	height: calc(32 * var(--u));
	stroke: var(--color-white);
}


/* ==========================================================================
   04. Clients (home page)
   --------------------------------------------------------------------------
   HTML: index.html <section class="home-clients">
   JS:   js/home-clients.js (Swiper ticker)
   ========================================================================== */

/* ---------- Section ---------- */
.home-page .home-clients{
	position: relative;
	overflow: hidden;
	padding: calc(60 * var(--u)) 0;
	/* white with a soft pink wash along the bottom: one glow from each bottom corner,
	   wide enough to meet in the middle, so there is no white strip in the centre */
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 100%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 100%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		var(--color-white);
}

.home-page .home-clients .container{
	max-width: var(--container-w);
}

/* ---------- Title ---------- */
.home-page .home-clients .section-title{
	text-align: center;
	margin-bottom: calc(40 * var(--u));
}


/* ---------- Slider ---------- */
.home-page .home-clients-slider{
	/* soft fade on the left and right edges */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
}

/* steady, even speed (no ease in / out between cards) */
.home-page .home-clients-slider .swiper-wrapper{
	transition-timing-function: linear !important;   /* Swiper sets its own timing inline */
}

/* one slide = card + the gap around it */
.home-page .home-client{
	width: calc(240 * var(--u));
	padding: 0 calc(10 * var(--u));
}

/* ---------- Card: white box with the client logo ---------- */
.home-page .home-client-card{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(110 * var(--u));
	margin: 0;
	padding: calc(16 * var(--u)) calc(20 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	transition: border-color 0.3s ease;
}

.home-page .home-client-card:hover,
.home-page .home-client.is-center .home-client-card{
	border-color: rgba(var(--color-accent-rgb), 0.65);    /* = the dotted rings in the About section */
}

/* logo: grey, full colour when hovered or in the middle
   (darkened a little so light logos, e.g. gold or orange ones, stay readable while grey) */
.home-page .home-client-card img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(100%) brightness(0.8) contrast(1.15);
	opacity: 1;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* the hovered card and the card in the middle (js/home-clients.js) show their colour */
.home-page .home-client-card:hover img,
.home-page .home-client.is-center .home-client-card img{
	filter: grayscale(0);
	opacity: 1;
}


/* ==========================================================================
   05. About (home page)
   --------------------------------------------------------------------------
   HTML: index.html <section class="about-us home-about">
   Left:  Cubix particle logo + ring of product icons (js/home-about-orbit.js)
   Right: title, text, key points (js/about-points.js), buttons
   ========================================================================== */

/* ---------- Section ---------- */
.home-page .home-about{
	position: relative;
	padding: calc(80 * var(--u)) 0;
	overflow: hidden;
	background: var(--color-white);
}

.home-page .home-about .container{
	position: relative;
	z-index: 1;                          /* above the side decorations */
	max-width: var(--container-w);
}

/* ---------- Left: ring of the 15 product icons around the particle logo (js/home-about-orbit.js) ----------
   The logo itself (canvas, js/particle-logo.js) is not touched. The ring is wider than the logo,
   so the icons never cross it; icons at the front pass in front of the logo, icons at the back behind it.
   The box keeps its 10:9 shape (1:1 on phones), so the section's layout and height stay the same. */
.home-page .home-about .cx-orbit{
	aspect-ratio: 10 / 9;
}

/* dotted ring: the js sets its size; its dots travel round with the icons (no spin) */
.home-page .home-about .cx-orbit-rings{
	overflow: visible;                   /* the ring may reach a little past the box */
}

/* behind the logo / in front of it (the logo canvas sits at z-index 1, custom.css);
   doubled class beats custom.css ".cx-orbit > :not(...)", which would put them in the layout */
.home-page .home-about .cx-orbit > .cx-orbit-layer.cx-orbit-layer{
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	pointer-events: none;
}

.home-page .home-about .cx-orbit > .cx-orbit-layer.is-front{
	z-index: 3;
}

/* one product: white round badge with its icon; js places, scales and fades it */
.home-page .home-about .cx-planet{
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(var(--color-primary-rgb), 0.1), 0 0 0 1px rgba(var(--color-primary-rgb), 0.06);
	opacity: 0;                          /* js fades the icons in when the section is reached */
	pointer-events: auto;
	will-change: transform, opacity;
	transition: box-shadow 0.3s ease;
}

.home-page .home-about .cx-planet img{
	display: block;
	width: 64%;
	height: 64%;
	object-fit: contain;
	pointer-events: none;
}

/* the icon at the front (or the hovered one): brand-pink outline + glow */
.home-page .home-about .cx-planet.is-focus{
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(var(--color-accent-2-rgb), 0.2), 0 0 0 1.5px var(--color-accent-2);
}

.home-page .home-about .cx-planet:focus-visible{
	outline: 2px solid var(--color-accent-2);
	outline-offset: 3px;
}

/* product name tag under the front icon: the site's product tag (custom.css .cx-chip), sized with the screen */
.home-page .home-about .cx-chip{
	gap: calc(8 * var(--u));
	padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
	font-size: max(10.5px, calc(14 * var(--u)));
	pointer-events: none;
}

/* the name tag stays on top: the icons get z-index 0-100 by depth (js/home-about-orbit.js) */
.home-page .home-about .cx-orbit-name{
	z-index: 101;
}

.home-page .home-about .cx-chip i{
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
}

/* ---------- Title + text ---------- */
.home-page .home-about-content .section-title{
	margin-bottom: 0;
}


.home-page .home-about-content .section-title p{
	margin: calc(20 * var(--u)) 0 0;
	font-size: calc(18 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

.home-page .home-about-content .section-title p strong{
	font-weight: 700;
	color: var(--color-primary);
}

/* ---------- Key points (icon + line timeline) ---------- */
.home-page .home-about .about-points{
	margin: calc(32 * var(--u)) 0 0;
}

.home-page .home-about .about-points li{
	padding: 0 0 calc(26 * var(--u)) calc(64 * var(--u));
}

.home-page .home-about .about-points li:last-child{
	padding-bottom: 0;
}

/* the icon replaces the old ring marker */
.home-page .home-about .about-points li::before{
	display: none;
}

/* line from one icon down to the next */
.home-page .home-about .about-points li::after{
	left: calc(21 * var(--u));
	top: calc(50 * var(--u));
	bottom: calc(4 * var(--u));
	background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.45), rgba(var(--color-accent-2-rgb), 0.45));
}

.home-page .home-about .about-points li:last-child::after{
	display: none;
}

.home-page .home-about-icon{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	margin: 0;                           /* custom.css gives every point <span> a top margin */
	border: 2px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(var(--color-white), var(--color-white)) padding-box,
		var(--gradient-brand) border-box;
	box-shadow: 0 0 0 calc(4 * var(--u)) rgba(var(--color-accent-rgb), 0.1);
}

.home-page .home-about-icon i{
	font-size: calc(17 * var(--u));
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-page .home-about .about-points strong{
	font-size: calc(20 * var(--u));
	line-height: 1.4;
	color: var(--color-primary);
}

.home-page .home-about .about-points li > span:not(.home-about-icon){
	margin-top: calc(4 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.5;
	color: rgba(var(--color-primary-rgb), 0.65);
}

/* ---------- Buttons ---------- */
.home-page .home-about-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(16 * var(--u)) calc(28 * var(--u));
	margin-top: calc(36 * var(--u));
}

/* ==========================================================================
   06. Home side decorations
   --------------------------------------------------------------------------
   Fill the empty space beside the container on wide screens (1200px+;
   hidden below that in cubix-responsive.css). Purely decorative.
   Left gap:
     <span class="home-side-word" aria-hidden="true"><span class="home-side-words" data-words="Your|Vision|Our|Innovation">Your</span></span>
                                                                   big outline word, bottom to top; changes one after another (js/home-about.js)
   Right gap:
     <div class="home-side-label" aria-hidden="true"><b>03</b><i></i><span class="home-side-words" data-words="...">Who We Are</span></div>
                                                                   section number + name, bottom to top;
                                                                   the name changes one after another (js/home-about.js)
   The section must have position: relative and overflow: hidden.
   Used by: 05. About
   ========================================================================== */

.home-page .home-side-word,
.home-page .home-side-label{
	--side-gap: calc((100% - var(--container-w)) / 2);   /* width of one empty side */
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	overflow-anchor: none;               /* the changing words resize: never let the browser use them to shift the scroll (page jump) */
}

/* ---------- Left: big outline word (reads bottom to top) ---------- */
.home-page .home-side-word{
	top: 50%;
	left: calc(var(--side-gap) / 2);     /* middle of the left gap */
	writing-mode: vertical-rl;
	transform: translate(-50%, -50%) rotate(180deg);
	font-family: var(--font-display);
	font-size: calc(90 * var(--u));         /* small enough that the longest word ("Innovation") stays inside the section */
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;                  /* outline only */
	-webkit-text-stroke: 1.5px rgba(var(--color-accent-rgb), 0.35);
}

/* the word changes one after another (js/home-about.js). The parent is turned 180deg,
   so +Y moves the word up on screen. */
.home-page .home-side-word .home-side-words{
	display: inline-block;
	transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;   /* 0.45s = FADE_MS in js/home-about.js */
}

.home-page .home-side-word .home-side-words.is-leaving{
	opacity: 0;
	transform: translateY(calc(30 * var(--u)));
	filter: blur(6px);
}

.home-page .home-side-word .home-side-words.is-entering{
	opacity: 0;
	transform: translateY(calc(-30 * var(--u)));
	filter: blur(6px);
	transition: none;
}

/* ---------- Right: section number + name ---------- */
.home-page .home-side-label{
	top: 50%;
	right: calc(var(--side-gap) / 2);    /* middle of the right gap */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(14 * var(--u));
	transform: translate(50%, -50%);
}

.home-page .home-side-label b{
	font-family: var(--font-display);
	font-size: calc(28 * var(--u));
	font-weight: 700;
	line-height: 1;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-page .home-side-label i{
	display: block;
	width: 1px;
	height: calc(70 * var(--u));
	background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
}

.home-page .home-side-label span{
	writing-mode: vertical-rl;
	height: calc(200 * var(--u));        /* fixed: a longer or shorter name never moves the number and the line */
	font-family: var(--font-heading);
	font-size: calc(13 * var(--u));
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: end;                     /* after the turn below, this keeps the name close to the line */
	color: rgba(var(--color-primary-rgb), 0.45);
	transform: rotate(180deg);           /* reads bottom to top, like the "Vision" word */
	transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;   /* 0.45s = FADE_MS in js/home-about.js */
}

/* changing name (js/home-about.js): the old one drifts up and fades out ... */
.home-page .home-side-label span.is-leaving{
	opacity: 0;
	transform: rotate(180deg) translateY(calc(14 * var(--u)));    /* turned 180deg, so +Y moves it up on screen */
	filter: blur(4px);
}

/* ... the new one starts a little lower, then rises into place */
.home-page .home-side-label span.is-entering{
	opacity: 0;
	transform: rotate(180deg) translateY(calc(-14 * var(--u)));   /* starts lower on screen */
	filter: blur(4px);
	transition: none;
}


/* ==========================================================================
   07. Products (home page)
   --------------------------------------------------------------------------
   HTML: index.html <section class="showcase">   JS: js/products-scroll.js
   Split-flap product board: 15 products, two at a time, on two flip cards
   in glass housings angled like an open book, with the counter + page dots
   between them and the scroll-down button under them.
   The section frame stays as it was (base styles: custom.css
   "Our Products — Scroll Showcase"): background grid + pink wash, colour
   glow and blobs, heading, top quote, side texts, bottom line, progress bar.
   This block:
     - room for the fixed header
     - board centred in the space between the header and the bottom line;
       side texts between the board and the container edges (40px away)
     - card size limited by the screen height (whole board always visible)
     - palette colours + font tokens, sizes from the 1920px design (--u)
   ========================================================================== */

.home-page .showcase{
	/* the section's own colour names now point at the palette */
	--ink: var(--color-primary);
	--mut: rgba(var(--color-primary-rgb), 0.6);
	--faint: rgba(var(--color-primary-rgb), 0.35);
	--line: rgba(var(--color-primary-rgb), 0.07);
	--acc: var(--color-accent);
	--font: var(--font-body);

	--sc-header: calc(92 * var(--u));                                          /* height of the fixed header */
	--sc-bottom: calc(50 * var(--u));                                          /* room for the bottom line */
	--sc-edge: max(15px, calc((100% - var(--container-w)) / 2 + 15px));        /* container edge */
	--sc-ctl-h: calc(132 * var(--u));                                          /* scroll-down button row + its gap */
	--sc-quote-h: calc(46 * var(--u));                                         /* the quote line under the header (+ its gap) */
	--sc-names-h: calc(131 * var(--u));                                        /* big outlined names above the cards (67px + their gap) */
	/* one card (with its glass housing): never taller than the screen allows (room kept for the quote,
	   the big names and the scroll-down button, so nothing slides under the header on short screens) */
	--sc-card-w: min(calc(400 * var(--u)), calc((100vh - var(--sc-header) - var(--sc-quote-h) - var(--sc-names-h) - var(--sc-bottom) - var(--sc-ctl-h) - 60 * var(--u)) * 0.9));
	--sc-mid-w: calc(36 * var(--u));                                           /* counter + dots column between the cards */
	--sc-gap: calc(24 * var(--u));                                             /* card <-> counter column */
	--sc-board-w: calc(var(--sc-card-w) * 2 + var(--sc-mid-w) + var(--sc-gap) * 2);
	--sc-side-gap: calc(32 * var(--u));                                        /* side info <-> board */
	/* board's middle, from the top of the screen. The whole block (big names + cards + scroll-down button)
	   sits low in the space between the quote line and the bottom line: of the spare height, 30% (at least
	   20px) stays above the bottom line and the rest goes above the names, so there is no empty band at the
	   bottom. The header's space is always kept free, so when the header slides back in (scrolling up) it
	   covers nothing. --sc-card-h = the card with its housing (card 11:12 + 12px housing on each side). */
	--sc-card-h: calc((var(--sc-card-w) - 24 * var(--u)) * 12 / 11 + 24 * var(--u));
	--sc-spare: calc(100vh - var(--sc-header) - var(--sc-quote-h) - var(--sc-bottom) - var(--sc-names-h) - var(--sc-card-h) - var(--sc-ctl-h));
	--sc-mid: calc(100vh - var(--sc-bottom) - max(20 * var(--u), var(--sc-spare) * 0.3) - (var(--sc-card-h) + var(--sc-ctl-h)) / 2);
	--sc-intro: 0px;                                                           /* js: the board rises from under the heading */

	height: 700vh;                       /* scroll room for the 8 steps (js/products-scroll.js sets the exact height) */
	background-color: var(--color-white);
}

/* soft pink wash along the TOP (a mirror of the Clients section's bottom: same colour, size and strength,
   the two corner glows meet in the middle), over the soft white vignette on the grid */
.home-page .showcase::before{
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 0%,   rgba(var(--color-accent-2-rgb), 0.08) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 0%, rgba(var(--color-accent-2-rgb), 0.08) 0%, transparent 90%),
		radial-gradient(ellipse 70% 55% at 50% 40%, transparent 0, var(--color-white) 100%);
}

/* fade into the next section (Services, white) */
.home-page .showcase::after{
	background: linear-gradient(180deg, rgba(var(--color-white-rgb), 0) 0%, var(--color-white) 100%);
}

/* ---------- Heading ---------- */
.home-page .showcase .heading{
	padding: calc(80 * var(--u)) 15px 0;   /* same top space as the About section (80px on 1920px) */
}

/* ---------- Colour glow: same blue -> pink change; strongest right behind the cards, fading to the edges ---------- */
.home-page .showcase .glow{
	background:
		radial-gradient(ellipse 38% 42% at 50% 52%, rgba(var(--glow), 0.3) 0%, rgba(var(--glow), 0.12) 55%, transparent 100%),
		radial-gradient(ellipse 60% 60% at 50% 55%, rgba(var(--glow), 0.12) 0%, rgba(var(--glow), 0.05) 50%, transparent 85%),
		linear-gradient(180deg, rgba(var(--glow), 0.03) 0%, rgba(var(--glow), 0.07) 100%);
}

.home-page .showcase .b1{ background: rgba(var(--glow), 0.08); }

.home-page .showcase .b2,
.home-page .showcase .b3{ background: rgba(var(--glow), 0.06); }

/* ---------- Top + bottom lines: inside the container, the top one under the header ---------- */
.home-page .showcase .top,
.home-page .showcase .bottom{
	left: var(--sc-edge);
	right: var(--sc-edge);
	font-size: calc(14 * var(--u));
}

.home-page .showcase .top{
	top: calc(var(--sc-header) + 16 * var(--u));
}

/* the quote on one line, in the section title's colour */
.home-page .showcase .top .sw{
	max-width: none;
	white-space: nowrap;
	color: var(--color-primary);
}

.home-page .showcase .bottom{
	bottom: calc(26 * var(--u));         /* room for the progress bar underneath */
	flex-wrap: wrap;                     /* not enough room: the right part drops to a second line */
	gap: calc(8 * var(--u)) 40px;
	font-size: calc(12 * var(--u));
}

/* left: the left card's category, right: the right card's category; one line each, in the section title's colour */
.home-page .showcase .bottom .sw{
	max-width: none;
	white-space: nowrap;
	color: var(--color-primary);
}

/* ---------- Progress bar: container wide, under the bottom line; one share per pair of products
   (js/products-scroll.js sets scaleX 1/8 -> 1), full on the last pair; slides with each flip ---------- */
.home-page .showcase .sc-progress{
	position: absolute;
	left: var(--sc-edge);
	right: var(--sc-edge);
	bottom: calc(12 * var(--u));
	height: calc(3 * var(--u));
	min-height: 2px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(var(--color-primary-rgb), 0.08);
}

.home-page .showcase .sc-progress i{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);   /* the glide's feel */
}

/* ---------- Side info: between the board and the container edges, 32px from the board,
   level with the cards' middle ---------- */
.home-page .showcase .side{
	top: calc(var(--sc-mid) - var(--sc-ctl-h) / 2);
	/* both panels start at the same height (labels level), whatever their text length: the top sits
	   half a usual panel (two-line "Built for", 254px) above the middle; longer texts grow downwards */
	margin-top: calc(-127 * var(--u));
}

/* left details (about the left card): the same fields as the right details, mirrored: right-aligned
   against the line on the board side; as wide as the space between the container edge and the board */
.home-page .showcase .side.left{
	left: auto;
	right: calc(50% + var(--sc-board-w) / 2 + var(--sc-side-gap));
	width: calc(50% - var(--sc-board-w) / 2 - var(--sc-side-gap) - var(--sc-edge));
	text-align: right;
}

.home-page .showcase .side.left dt{
	justify-self: end;
}

/* thin vertical line on the board side of the left text: a mirror of the right info's line (.vline) */
.home-page .showcase .side.left::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(-18 * var(--u));
	width: 1px;
	background: linear-gradient(var(--line), var(--faint), var(--line));
}

/* right details (about the right card): from the board up to the container edge */
.home-page .showcase .side.right{
	right: auto;
	left: calc(50% + var(--sc-board-w) / 2 + var(--sc-side-gap));
	width: calc(50% - var(--sc-board-w) / 2 - var(--sc-side-gap) - var(--sc-edge));
}

.home-page .showcase .vline{
	left: calc(-18 * var(--u));
}

.home-page .showcase dl{
	font-size: calc(15 * var(--u));
}

.home-page .showcase dt{
	margin-top: calc(10 * var(--u));
	font-size: calc(13 * var(--u));
}

.home-page .showcase dt:first-child{
	margin-top: 0;
}

.home-page .showcase dd{
	font-family: var(--font-display);
	font-size: calc(22 * var(--u));
	font-weight: 600;
	line-height: 1.25;
}

/* "Live" dot: after the word (right side) */
.home-page .showcase .dot{
	width: calc(6 * var(--u));
	height: calc(6 * var(--u));
	margin-right: 0;
	margin-left: calc(8 * var(--u));
}

/* ---------- Product rails: in the empty space between the screen edge and the container, level
   with the side details. Left rail = every product that appears on the left card, right rail = the
   right card's (js/products-scroll.js builds the tiles). The current product is highlighted and nudged
   towards the cards; the others are faded and grey. Click a tile to go to that product.
   Wide screens only (hidden below 1200px in cubix-responsive.css). ---------- */
.home-page .showcase .sc-rail{
	position: absolute;
	top: calc(var(--sc-mid) - var(--sc-ctl-h) / 2);
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--u));
	width: calc(var(--sc-edge) - 70 * var(--u));     /* from 30px off the screen edge to 40px before the container */
	transform: translateY(-50%);
	pointer-events: auto;                /* the pinned stage itself ignores the mouse (custom.css) */
}

.home-page .showcase .sc-rail.left{
	left: calc(30 * var(--u));
	align-items: flex-end;               /* tiles line up on the side towards the cards */
}

.home-page .showcase .sc-rail.right{
	right: calc(30 * var(--u));
	align-items: flex-start;
}

.home-page .showcase .sc-tile{
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	width: min(100%, calc(170 * var(--u)));
	padding: calc(7 * var(--u)) calc(12 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.1);
	border-radius: calc(10 * var(--u));
	background: rgba(var(--color-white-rgb), 0.75);
	box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(var(--color-primary-rgb), 0.06);
	color: rgba(var(--color-primary-rgb), 0.6);
	font-family: var(--font-display);
	font-size: calc(15 * var(--u));
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	word-spacing: normal;
	cursor: pointer;
	opacity: 0.6;
	filter: grayscale(1);
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.45s cubic-bezier(.22, 1, .36, 1),
		border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.home-page .showcase .sc-tile img{
	flex: none;
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
	object-fit: contain;
}

.home-page .showcase .sc-tile:hover{
	opacity: 0.9;
	filter: none;
}

.home-page .showcase .sc-tile:focus-visible{
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* the product on the card: full colour, pink border and glow, a little bigger, nudged towards the cards */
.home-page .showcase .sc-tile.is-active{
	opacity: 1;
	filter: none;
	color: var(--color-primary);
	border-color: rgba(var(--color-accent-2-rgb), 0.55);
	background-color: var(--color-white);
	box-shadow:
		0 0 0 calc(3 * var(--u)) rgba(var(--color-accent-2-rgb), 0.1),
		0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(var(--color-accent-2-rgb), 0.22);
}

.home-page .showcase .sc-rail.left .sc-tile.is-active{
	transform: translateX(calc(8 * var(--u))) scale(1.05);
}

.home-page .showcase .sc-rail.right .sc-tile.is-active{
	transform: translateX(calc(-8 * var(--u))) scale(1.05);
}

/* ---------- Big outlined names of the two products, above the cards
   (same columns as the board; pink outline on the left, blue on the right; they fade with each flip) ---------- */
.home-page .showcase .sc-names{
	position: absolute;
	right: 0;
	bottom: calc(100% + 64 * var(--u));  /* clear of the card stack above the cards */
	left: 0;
	display: grid;
	grid-template-columns: var(--sc-card-w) var(--sc-mid-w) var(--sc-card-w);
	gap: var(--sc-gap);
	pointer-events: none;
}

.home-page .showcase .sc-names span{
	justify-self: center;
	font-family: var(--font-display);
	font-size: calc(67 * var(--u));     /* one size for every name (the longest, CampusLink Pro, sits beside a short one);
	                                       js shrinks a name only if it would not fit its card (very short screens) */
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	word-spacing: normal;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(var(--color-accent-2-rgb), 0.35);   /* same outline + strength as the side words */
}

.home-page .showcase .sc-names span:last-child{
	-webkit-text-stroke-color: rgba(var(--color-accent-rgb), 0.35);
}

/* ---------- Flip board: centred in the space between the header and the bottom line;
   rises from under the heading at the start (js sets --sc-intro) ---------- */
.home-page .showcase .sc-flip{
	position: absolute;
	left: 50%;
	top: var(--sc-mid);
	z-index: 3;
	width: var(--sc-board-w);
	transform: translate(-50%, calc(-50% + var(--sc-intro)));
	pointer-events: auto;                /* the pinned stage itself ignores the mouse (custom.css) */
}

/* left card | counter | right card; js tilts the cards a little with the mouse (--rx / --ry) */
.home-page .showcase .sc-board{
	--rx: 0deg;
	--ry: 0deg;
	display: grid;
	grid-template-columns: var(--sc-card-w) var(--sc-mid-w) var(--sc-card-w);
	align-items: center;
	gap: var(--sc-gap);
	perspective: calc(1800 * var(--u));
	position: relative;                  /* for the shared shadow below */
}

/* one long soft shadow on the floor under both cards (below the card stacks) */
.home-page .showcase .sc-board::after{
	content: '';
	position: absolute;
	top: calc(100% + 70 * var(--u));
	left: 6%;
	right: 6%;
	z-index: -1;
	height: calc(46 * var(--u));
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-accent-2-rgb), 0.06) 60%, transparent);
	filter: blur(8px);
	pointer-events: none;
}

/* the two cards turn towards the middle, like an open book */
.home-page .showcase .sc-unit{
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}

/* --sc-lift: the card rises a little on hover (cubix-responsive.css, mouse only) */
.home-page .showcase .sc-unit.l{
	transform: translate3d(0, var(--sc-lift, 0px), 0) rotateX(calc(5deg + var(--rx))) rotateY(calc(11deg + var(--ry)));
}

.home-page .showcase .sc-unit.r{
	transform: translate3d(0, var(--sc-lift, 0px), 0) rotateX(calc(5deg + var(--rx))) rotateY(calc(-11deg + var(--ry)));
}

/* ---------- Card stacks: the edges of the other cards, behind each card ----------
   above = cards already flipped, below = cards still to come (one edge per page of products).
   js/products-scroll.js builds the edges (.sc-leaf, --i = 0 next to the card) and turns them on / off:
   scrolling down, the stack below gives up a card as the flip starts and the stack above gains one
   as the flap lands; scrolling up, the other way round. An edge that is off is tucked under the card. */
.home-page .showcase .sc-unit{
	--sc-leaf-step: calc(6 * var(--u));  /* how much more of each edge shows */
}

.home-page .showcase .sc-stack{
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform-style: preserve-3d;
}

/* each edge = the visible strip of a card behind: white card, a thin darker band for its thickness,
   a dark line on the outer edge and a small shadow on the card below, so every sheet reads on its own.
   --jx / --jr (js) shift and turn each sheet very slightly, so the stack does not look machine-perfect */
.home-page .showcase .sc-leaf{
	--z: calc((var(--i) + 1) * -1.5 * var(--u));   /* just behind the card, each sheet a little further */
	position: absolute;
	left: calc(5% + var(--i) * 1.2%);    /* each edge a little narrower: the stack reads in depth */
	right: calc(5% + var(--i) * 1.2%);
	height: calc(48 * var(--u));
	opacity: 0;
	transform: translate3d(0, 0, var(--z));
	transition: transform 0.45s cubic-bezier(.2, .7, .2, 1), opacity 0.3s ease;
}

.home-page .showcase .sc-stack.is-bot .sc-leaf{
	bottom: 0;
	border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.3);
	border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u));
	background:
		linear-gradient(to top, rgba(var(--color-primary-rgb), 0.16) 0, rgba(var(--color-primary-rgb), 0.06) calc(2.5 * var(--u)), transparent calc(2.5 * var(--u))),
		linear-gradient(var(--color-white), var(--color-light));
	box-shadow:
		inset 1px 0 0 rgba(var(--color-primary-rgb), 0.1),
		inset -1px 0 0 rgba(var(--color-primary-rgb), 0.1),
		0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(var(--color-primary-rgb), 0.2);
}

.home-page .showcase .sc-stack.is-top .sc-leaf{
	top: 0;
	border-top: 1px solid rgba(var(--color-primary-rgb), 0.24);
	border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
	background:
		linear-gradient(to bottom, rgba(var(--color-white-rgb), 1) 0, rgba(var(--color-primary-rgb), 0.05) calc(2.5 * var(--u)), transparent calc(2.5 * var(--u))),
		linear-gradient(var(--color-light), var(--color-white));
	box-shadow:
		inset 1px 0 0 rgba(var(--color-primary-rgb), 0.1),
		inset -1px 0 0 rgba(var(--color-primary-rgb), 0.1),
		0 calc(-1 * var(--u)) calc(3 * var(--u)) rgba(var(--color-primary-rgb), 0.14);
}

/* on: the edge slides out from under the card to its place in the stack (further sheets a little lighter) */
.home-page .showcase .sc-stack.is-bot .sc-leaf.is-on{
	opacity: calc(1 - var(--i) * 0.05);
	transform: translate3d(var(--jx, 0), calc((var(--i) + 1) * var(--sc-leaf-step)), var(--z)) rotate(var(--jr, 0deg));
}

.home-page .showcase .sc-stack.is-top .sc-leaf.is-on{
	opacity: calc(1 - var(--i) * 0.05);
	transform: translate3d(var(--jx, 0), calc((var(--i) + 1) * var(--sc-leaf-step) * -1), var(--z)) rotate(var(--jr, 0deg));
}


/* glass housing with a brand-gradient bezel */
.home-page .showcase .sc-housing{
	position: relative;
	padding: calc(12 * var(--u));
	border-radius: calc(32 * var(--u));
	background: rgba(var(--color-white-rgb), 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow:
		inset 0 1px 0 rgba(var(--color-white-rgb), 0.9),
		inset 0 0 0 1px rgba(var(--color-white-rgb), 0.35),
		0 2px 4px rgba(var(--color-primary-rgb), 0.06),
		0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(var(--color-primary-rgb), 0.3),
		0 calc(60 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(var(--glow), 0.45);
}

.home-page .showcase .sc-housing::before{
	content: '';
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(var(--color-accent-2-rgb), 0.7), rgba(var(--color-accent-rgb), 0.3) 45%, rgba(var(--color-accent-rgb), 0.7));
	-webkit-mask: linear-gradient(var(--color-black) 0 0) content-box, linear-gradient(var(--color-black) 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(var(--color-black) 0 0) content-box exclude, linear-gradient(var(--color-black) 0 0);
}

/* soft shadow on the "floor" under each card: sits under the bottom of the card stack
   (--sc-pile-bot = cards in the stack below, set by js/products-scroll.js) */
.home-page .showcase .sc-floor{
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: calc(-34 * var(--u) - var(--sc-pile-bot, 0) * var(--sc-leaf-step));
	height: calc(30 * var(--u));
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.34), transparent);
	filter: blur(6px);
	transform: translateZ(calc(-40 * var(--u)));
	transition: bottom 0.45s cubic-bezier(.2, .7, .2, 1), transform 0.5s cubic-bezier(.2, .7, .2, 1), opacity 0.5s ease;
}

/* ---------- Split-flap card: two halves of the same face; the moving halves (flaps) turn over the hinge ---------- */
.home-page .showcase .sc-flipcard{
	--r: calc(22 * var(--u));            /* card corners */
	--d: 0.36s;                          /* time of one half-turn */
	container: sc-card / inline-size;    /* very narrow cards hide some text (cubix-responsive.css) */
	position: relative;
	width: 100%;
	aspect-ratio: 11 / 12;
	border-radius: var(--r);
	perspective: calc(1200 * var(--u));
}

/* pastel brand wash across the whole card: pink from the top-right corner, blue from the bottom-left.
   Each half shows its own half of it (background sized to the full card), so the two halves join seamlessly. */
.home-page .showcase .sc-half{
	--sc-wash: linear-gradient(to bottom left, rgba(var(--color-accent-2-rgb), 0.16), rgba(var(--color-accent-2-rgb), 0.06) 45%, rgba(var(--color-accent-rgb), 0.08) 55%, rgba(var(--color-accent-rgb), 0.22));
	position: absolute;
	left: 0;
	right: 0;
	height: calc(50% - 2px);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.home-page .showcase .sc-half.is-top{
	top: 0;
	border-radius: var(--r) var(--r) 4px 4px;
	transform-origin: 50% calc(100% + 2px);
	background:
		linear-gradient(transparent, rgba(var(--color-primary-rgb), 0.025)),
		var(--sc-wash) 0 0 / 100% 200%,
		var(--color-white);
	box-shadow: inset 0 1px 0 var(--color-white), inset 0 -1px 0 rgba(var(--color-primary-rgb), 0.08);
}

.home-page .showcase .sc-half.is-bot{
	bottom: 0;
	border-radius: 4px 4px var(--r) var(--r);
	transform-origin: 50% -2px;
	background:
		linear-gradient(rgba(var(--color-primary-rgb), 0.02), transparent),
		var(--sc-wash) 0 100% / 100% 200%,
		var(--color-white);
	box-shadow: inset 0 1px 0 rgba(var(--color-primary-rgb), 0.1);
}

/* the face is twice the half's height: the top half shows its upper part, the bottom half its lower part */
.home-page .showcase .sc-half .sc-face{
	position: absolute;
	left: 0;
	right: 0;
	height: calc(200% + 4px);
}

.home-page .showcase .sc-half.is-top .sc-face{ top: 0; }
.home-page .showcase .sc-half.is-bot .sc-face{ bottom: 0; }

/* soft light / shade on each half */
.home-page .showcase .sc-half.is-top::after,
.home-page .showcase .sc-half.is-bot::after{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.home-page .showcase .sc-half.is-top::after{
	background: linear-gradient(170deg, rgba(var(--color-white-rgb), 0.75), transparent 40%);
}

/* no grey shade under the hinge: it would dull the pastel wash */
.home-page .showcase .sc-half.is-bot::after{
	background: none;
}

/* flaps: scrolling down they turn up (.up), scrolling up they turn down (.dn).
   a = the old half leaving, b = the new half landing right after it */
.home-page .showcase .sc-flap{ z-index: 2; }
.home-page .showcase .sc-flap.dn.a{ transform: rotateX(0); }
.home-page .showcase .sc-flap.dn.b{ transform: rotateX(90deg); }
.home-page .showcase .sc-flap.up.a{ transform: rotateX(0); }
.home-page .showcase .sc-flap.up.b{ transform: rotateX(-90deg); }

.home-page .showcase .sc-flap.dn.a.go{ animation: scFlipADn var(--d) cubic-bezier(.45, .05, .8, .6) forwards; }
.home-page .showcase .sc-flap.dn.b.go{ animation: scFlipBDn var(--d) cubic-bezier(.2, .8, .3, 1.15) var(--d) forwards; }
.home-page .showcase .sc-flap.up.a.go{ animation: scFlipAUp var(--d) cubic-bezier(.45, .05, .8, .6) forwards; }
.home-page .showcase .sc-flap.up.b.go{ animation: scFlipBUp var(--d) cubic-bezier(.2, .8, .3, 1.15) var(--d) forwards; }

@keyframes scFlipADn{ to{ transform: rotateX(-90deg); } }
@keyframes scFlipBDn{ from{ transform: rotateX(90deg); } to{ transform: rotateX(0); } }
@keyframes scFlipAUp{ to{ transform: rotateX(90deg); } }
@keyframes scFlipBUp{ from{ transform: rotateX(-90deg); } to{ transform: rotateX(0); } }

/* light on the moving flaps: darker as they turn away, brighter as they land */
.home-page .showcase .sc-shade{
	position: absolute;
	inset: 0;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	background: rgba(var(--color-primary-rgb), 0.38);
}

.home-page .showcase .sc-flap.a.go .sc-shade{ animation: scShadeIn var(--d) ease-in forwards; }
.home-page .showcase .sc-flap.b.go .sc-shade{ opacity: 1; animation: scShadeOut var(--d) ease-out var(--d) forwards; }

@keyframes scShadeIn{ to{ opacity: 1; } }
@keyframes scShadeOut{ to{ opacity: 0; } }

/* shadow the flap casts on the half it is about to cover */
.home-page .showcase .sc-cast{
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: calc(50% - 2px);
	opacity: 0;
	pointer-events: none;
}

.home-page .showcase .sc-cast.is-top{
	top: 0;
	border-radius: var(--r) var(--r) 4px 4px;
	background: linear-gradient(transparent, rgba(var(--color-primary-rgb), 0.22));
}

.home-page .showcase .sc-cast.is-bot{
	bottom: 0;
	border-radius: 4px 4px var(--r) var(--r);
	background: linear-gradient(rgba(var(--color-primary-rgb), 0.22), transparent);
}

.home-page .showcase .sc-cast.go{ animation: scCast calc(var(--d) * 2) ease-in-out forwards; }

@keyframes scCast{ 50%{ opacity: 1; } }

/* hinge slot with a pin on each side */
.home-page .showcase .sc-hinge{
	position: absolute;
	left: -6px;
	right: -6px;
	top: 50%;
	z-index: 6;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	pointer-events: none;
	background: linear-gradient(rgba(var(--color-primary-rgb), 0.3), rgba(var(--color-primary-rgb), 0.1));
}

.home-page .showcase .sc-hinge::before,
.home-page .showcase .sc-hinge::after{
	content: '';
	position: absolute;
	top: -6px;
	width: 12px;
	height: 16px;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.25), var(--color-white) 45%, rgba(var(--color-primary-rgb), 0.35));
	box-shadow: 0 2px 3px rgba(var(--color-primary-rgb), 0.3);
}

.home-page .showcase .sc-hinge::before{ left: 0; }
.home-page .showcase .sc-hinge::after{ right: 0; }

/* ---------- Card face: number | logo | category, name, button ---------- */
/* number + logo stay in the top half and category / name / button in the bottom half, so the hinge
   (the split between the two halves) never cuts through the logo. The last row starts --sc-hinge-gap
   below the middle of the card (50% of the content box = the middle when top and bottom padding are equal);
   the logo keeps the same gap above the middle (its margin-bottom). */
.home-page .showcase .sc-face{
	--sc-hinge-gap: calc(14 * var(--u));
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) calc(50% - var(--sc-hinge-gap));
	padding: calc(26 * var(--u)) calc(28 * var(--u));
	color: var(--color-primary);
}

.home-page .showcase .sc-face-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: calc(13 * var(--u));
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: rgba(var(--color-primary-rgb), 0.5);
}

.home-page .showcase .sc-no{
	font-family: var(--font-display);
	font-size: calc(38 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-page .showcase .sc-face-logo{
	position: relative;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* one cell exactly the box's size, so the logo is centred in it */
	place-items: center;
	min-height: 0;
	margin-bottom: calc(var(--sc-hinge-gap) * 2);   /* ends --sc-hinge-gap above the hinge */
	padding: 0 4%;
}

.home-page .showcase .sc-face-logo::before{
	content: '';
	position: absolute;
	width: 90%;
	height: 100%;
	border-radius: 50%;
	background:
		radial-gradient(closest-side at 38% 50%, rgba(var(--color-accent-2-rgb), 0.24), transparent),
		radial-gradient(closest-side at 62% 50%, rgba(var(--color-accent-rgb), 0.3), transparent);
	filter: blur(calc(14 * var(--u)));
	transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), opacity 0.5s ease;
}

.home-page .showcase .sc-face-logo img{
	position: relative;
	max-width: 100%;
	max-height: min(calc(116 * var(--u)), 100%);   /* shrinks to fit the top half on small cards */
	object-fit: contain;
	filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(var(--color-accent-2-rgb), 0.15));
	transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), filter 0.5s ease;
}

.home-page .showcase .sc-face-foot{
	display: grid;
	align-self: end;                     /* at the bottom of the bottom half, like before */
	justify-items: start;
	gap: calc(4 * var(--u));
}

/* category: small capitals in the brand gradient */
.home-page .showcase .sc-face-foot small{
	font-size: calc(13 * var(--u));
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-page .showcase .sc-face-row{
	display: grid;
	justify-items: start;
	gap: calc(12 * var(--u));
}

.home-page .showcase .sc-face-row h3{
	font-family: var(--font-display);
	font-size: calc(26 * var(--u));
	font-weight: 600;
	line-height: 1.1;
}

/* ---------- Counter + page dots between the cards ---------- */
.home-page .showcase .sc-mid{
	display: grid;
	justify-items: center;
	gap: calc(14 * var(--u));
	transform: translateZ(calc(40 * var(--u)));
}

.home-page .showcase .sc-count{
	padding: calc(12 * var(--u)) calc(6 * var(--u));
	border-radius: 100px;
	writing-mode: vertical-rl;
	font-size: calc(12 * var(--u));
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--mut);
	background: rgba(var(--color-white-rgb), 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(var(--color-white-rgb), 0.9), 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-12 * var(--u)) rgba(var(--color-primary-rgb), 0.4);
}

.home-page .showcase .sc-count b{
	color: var(--color-primary);
}

/* page dots: one per step, the current one a tall gradient pill (same dots as the site's sliders,
   e.g. Why Choose Us); click one to go to it (js/products-scroll.js) */
.home-page .showcase .sc-dots{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(10 * var(--u));
}

.home-page .showcase .sc-dots button{
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	min-width: 6px;
	min-height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), 0.15);
	cursor: pointer;
	transition: height 0.35s cubic-bezier(.22, 1, .36, 1), width 0.35s cubic-bezier(.22, 1, .36, 1), background 0.35s ease;
}

.home-page .showcase .sc-dots button:hover{
	background: rgba(var(--color-primary-rgb), 0.3);
}

.home-page .showcase .sc-dots button.is-active{
	height: calc(28 * var(--u));
	background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
}

.home-page .showcase .sc-dots button:focus-visible{
	outline: 2px solid var(--color-accent-2);
	outline-offset: 3px;
}

/* ---------- Scroll-down button under the cards ---------- */
.home-page .showcase .sc-ctl{
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(96 * var(--u));
	margin-top: calc(var(--sc-ctl-h) - 96 * var(--u));
}

/* scroll-down button: same as the hero's (custom.css "hero-scroll-*"): "PRESS TO SCROLL" curved over
   the mouse, navy text on the light stage. Click: skip to the next section (js/products-scroll.js) */
.home-page .showcase .sc-skip{
	position: relative;
	flex: none;
	width: calc(96 * var(--u));          /* a little smaller than the hero button (110) */
	height: calc(96 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* curved text: like the hero's, in navy */
.home-page .showcase .sc-skip .hero-scroll-ring text{
	fill: var(--color-primary);
	font-size: 12px;                     /* SVG text: scales with the ring */
	letter-spacing: 1.6px;               /* "PRESS TO SCROLL" fits the arc */
}

.home-page .showcase .sc-skip .hero-scroll-ring{
	filter: none;                        /* the hero's white glow is for the dark background */
}

.home-page .showcase .sc-skip .hero-scroll-mouse{
	width: calc(28 * var(--u));
	height: calc(54 * var(--u));
	margin: calc(10 * var(--u)) 0 0;     /* gap under the curved text, like the hero */
	border-radius: calc(14 * var(--u));
	background: var(--color-black);
	border-color: var(--color-white);
	box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(var(--color-primary-rgb), 0.18);
}

.home-page .showcase .sc-skip .hero-scroll-mouse svg{
	width: calc(11 * var(--u));
	height: calc(28 * var(--u));
	stroke: var(--color-white);
}

.home-page .showcase .sc-skip:focus-visible{
	outline: 2px solid var(--color-accent-2);
	outline-offset: 4px;
	border-radius: 50%;
}


/* ==========================================================================
   08. Services (home page)
   --------------------------------------------------------------------------
   HTML: index.html <div class="our-services">  (base styles: custom.css "Our Services")
   Same design; fixes: white background with a pink wash at the bottom, container + sizes
   scaled from the 1920px design, 80px top / bottom, 40px between title and cards,
   cards with a border like the Clients cards and a very light shadow.
   ========================================================================== */

/* white like the About section, with a soft pink wash along the bottom
   (same as the Clients section's bottom: the two corner glows meet in the middle) */
.home-page .our-services{
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 100%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 100%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		var(--color-white);
	padding: calc(80 * var(--u)) 0;            /* top / bottom space like the About section */
}

/* container scales like every other section */
.home-page .our-services .container{
	max-width: var(--container-w);
}

/* space between the title and the cards: 40px (custom.css gives 80px) */
.home-page .our-services .section-row{
	margin-bottom: calc(40 * var(--u));
}

/* gap between the cards: 20px side by side and 20px between rows.
   custom.css sets every row to 15px + 15px column padding (= 30px), so set it here directly. */
.home-page .our-services .row{
	margin-right: calc(-10 * var(--u));
	margin-left: calc(-10 * var(--u));
}

.home-page .our-services .row > *{
	padding-right: calc(10 * var(--u));
	padding-left: calc(10 * var(--u));
}

.home-page .our-services .container > .row:last-child{
	margin-bottom: calc(-20 * var(--u));       /* cancels the last row's card margin (custom.css used -30px) */
}

.home-page .our-services .service-item{
	height: calc(100% - 20 * var(--u));
	margin-bottom: calc(20 * var(--u));
	padding: calc(30 * var(--u));              /* inner space: 30px (was 40px) */
	border-radius: calc(12 * var(--u));        /* = the Clients cards */
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);                        /* = Clients cards */
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);   /* very light */
}

/* icon -> title: 40px (was 90px) */
.home-page .our-services .service-item .icon-box{
	margin-bottom: calc(40 * var(--u));
}

.home-page .our-services .service-item .icon-box img{
	max-width: calc(80 * var(--u));
}

/* title row: title + round arrow */
.home-page .our-services .service-title-box{
	margin-bottom: calc(15 * var(--u));
}

.home-page .our-services .service-title{
	width: calc(100% - 55 * var(--u));
}

.home-page .our-services .service-title h3{
	font-size: calc(20 * var(--u));
	line-height: 1.3;
}

.home-page .our-services .service-btn a{
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	margin-left: calc(15 * var(--u));
}

.home-page .our-services .service-btn a i{
	font-size: calc(18 * var(--u));
}

.home-page .our-services .service-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
}

/* description: same colour as the About and Products descriptions; white on the coloured (active / hovered) card */
.home-page .our-services .service-content p{
	color: rgba(var(--color-primary-rgb), 0.7);
}

.home-page .our-services .service-item.active .service-content p,
.home-page .our-services .service-item:hover .service-content p{
	color: var(--color-white);
}


/* ==========================================================================
   09. Section titles (all pages)
   --------------------------------------------------------------------------
   ONE place for the title of every home section (Clients, About, Products,
   Services, Solutions, Why Choose Us, Testimonials):
     <div class="section-title"><h3>small title</h3><h2 class="nm-heading">Big <span>title</span></h2></div>
   Same font, size and spacing everywhere; sizes scale from the 1920px design.
   Tablet / mobile sizes: cubix-responsive.css "09. Home section titles".
   ========================================================================== */

/* small title above (e.g. "OUR SERVICES"), with the icon in front */
.section-title h3,
.showcase .heading h3{
	font-family: var(--font-heading);
	font-size: calc(15 * var(--u));
	letter-spacing: 0.2em;
	padding-left: calc(30 * var(--u));
	margin-bottom: 6px;                  /* small title -> big title: 6px, like the home page */
}

.section-title h3::before,
.showcase .heading h3::before{
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
}

/* big title */
.section-title h2.nm-heading.nm-heading,
.showcase .heading h2.nm-heading.nm-heading{
	margin: 0;
	font-family: var(--font-display);
	font-size: calc(46 * var(--u));
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0;
}

/* title colours: dark on light sections (dark sections keep their white title from custom.css) */
.section-title:not(.dark-section) h3,
.section-title:not(.dark-section) h2.nm-heading.nm-heading,
.showcase .heading h3,
.showcase .heading h2.nm-heading.nm-heading{
	color: var(--color-primary);
}


/* ==========================================================================
   10. Feature / Our Solutions (home page)
   --------------------------------------------------------------------------
   Same design (photos left, solution list right); only the shared home values:
   container + sizes scaled from the 1920px design, 80px top / bottom, boxes with
   the Clients / Services card border and corners, 20px gaps, Services text colours.
   Tablet / mobile: cubix-responsive.css "10. Feature".
   ========================================================================== */

.home-page .our-feature{
	padding: calc(80 * var(--u)) 0;
}

.home-page .our-feature .container{
	max-width: var(--container-w);
}

/* ---------- Left: photo boxes + experience box ---------- */
.home-page .our-feature .feature-image figure{
	overflow: hidden;
	border-radius: calc(12 * var(--u));                        /* = Clients / Services cards */
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);    /* = Clients / Services cards */
}

.home-page .our-feature .feature-image img{
	border-radius: 0;                                          /* the figure clips the corners */
}

/* top box: the video covers the whole box (the img under it keeps the box size and shows while the video loads) */
.home-page .our-feature .feature-video video{
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;                                         /* fills the box, no empty strips */
	object-position: left center;                              /* trim only the empty right side, so the caption at the left edge stays whole */
}

/* gap between the big photo and the lower row, and inside the lower row: 20px */
.home-page .our-feature .company-experience-info{
	gap: calc(20 * var(--u));
	margin-top: calc(20 * var(--u));
}

.home-page .our-feature .company-experience-info .feature-image{
	display: flex;                                             /* the photo fills the full row height */
	width: calc(65% - 10 * var(--u));
}

/* lower photo: as tall as the experience box next to it, picture cropped to cover */
.home-page .our-feature .company-experience-info .feature-image figure{
	display: flex;
	flex: 1;
}

.home-page .our-feature .company-experience-info .feature-image img{
	min-height: 100%;
	object-fit: cover;
}

/* ---------- Blinking server LEDs (lower photo) ----------
   The base photo has its LEDs dimmed; each LED layer is the original LEDs of one group of racks
   on a transparent background, cropped like the photo. Each layer flickers on its own rhythm,
   so the racks blink out of step like a real server room.
   Hidden while the reveal slides the photo in (js/function.js adds .is-revealing), as the layers
   would slide with the box and not with the photo. */
.home-page .our-feature .feature-server .feature-server-leds{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	animation: feature-server-blink-a 2.4s steps(1, end) infinite;
}

.home-page .our-feature .feature-server .feature-server-leds:nth-of-type(3){
	animation-name: feature-server-blink-b;
	animation-duration: 1.7s;
	animation-delay: -0.6s;
}

.home-page .our-feature .feature-server .feature-server-leds:nth-of-type(4){
	animation-name: feature-server-blink-c;
	animation-duration: 3.1s;
	animation-delay: -1.3s;
}

.home-page .our-feature .feature-server .is-revealing .feature-server-leds{
	visibility: hidden;
}

@keyframes feature-server-blink-a{
	0%   { opacity: 1; }
	18%  { opacity: 0.15; }
	24%  { opacity: 1; }
	52%  { opacity: 0.4; }
	56%  { opacity: 1; }
	78%  { opacity: 0.1; }
	84%  { opacity: 1; }
}

@keyframes feature-server-blink-b{
	0%   { opacity: 0.2; }
	10%  { opacity: 1; }
	38%  { opacity: 0.15; }
	44%  { opacity: 1; }
	66%  { opacity: 0.5; }
	70%  { opacity: 1; }
	90%  { opacity: 0.1; }
}

@keyframes feature-server-blink-c{
	0%   { opacity: 1; }
	30%  { opacity: 0.1; }
	34%  { opacity: 1; }
	46%  { opacity: 0.3; }
	52%  { opacity: 1; }
	72%  { opacity: 0.15; }
	80%  { opacity: 1; }
}

/* "+ Properties Powered" circles: client logos (= the Clients section), white so every logo reads */
.home-page .our-feature .company-client-images .client-image:not(.client-counter){
	background: var(--color-white);
}

.home-page .our-feature .company-client-images .client-image figure,
.home-page .our-feature .company-client-images .client-image img{
	width: 100%;
	height: 100%;
}

.home-page .our-feature .company-client-images .client-image img{
	max-width: none;
	padding: 12%;
	border-radius: 0;
	object-fit: contain;
}

.home-page .our-feature .company-experience-box{
	width: calc(35% - 10 * var(--u));
	padding: calc(20 * var(--u));
	border-radius: calc(12 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
}

.home-page .our-feature .company-experience-content{
	margin-bottom: calc(20 * var(--u));
	padding-bottom: calc(20 * var(--u));
}

.home-page .our-feature .company-experience-content h2{
	font-size: calc(60 * var(--u));
	font-weight: 800;                     /* same bold number as the Why Choose counters */
	margin-bottom: calc(10 * var(--u));
}

.home-page .our-feature .company-experience-content p{
	font-size: calc(18 * var(--u));       /* same label as the Why Choose counters */
	opacity: 1;
}

/* ---------- Right: solution list ---------- */
.home-page .our-feature .section-title{
	margin-bottom: calc(40 * var(--u));                        /* title -> content: 40px, like every home section */
}

.home-page .our-feature .ferature-list-item{
	margin-bottom: calc(40 * var(--u));
}

.home-page .our-feature .ferature-list-item:last-child{
	margin-bottom: 0;
}

.home-page .our-feature .ferature-list-item .icon-box{
	width: calc(84 * var(--u));                                /* filled gradient circle: 84px, white line icon inside */
	height: calc(84 * var(--u));
	margin-right: calc(28 * var(--u));                         /* icon -> text: 28px */
	box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(var(--color-accent-2-rgb), 0.3);   /* soft pink glow under the circle (= the button shadow) */
}

.home-page .our-feature .ferature-list-item .icon-box img{
	max-width: calc(42 * var(--u));
	filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(var(--color-primary-rgb), 0.45));   /* lifts the white icon off the gradient */
}

.home-page .our-feature .ferature-list-content{
	width: calc(100% - 112 * var(--u));
}

/* title + description: same size and colour as the Services cards */
.home-page .our-feature .ferature-list-content h3{
	font-family: var(--font-body);                             /* = the About points titles */
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: 1.3;
	margin-bottom: calc(10 * var(--u));
	color: var(--color-primary);
}

.home-page .our-feature .ferature-list-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}


/* ==========================================================================
   11. Why Choose Us (home page)
   --------------------------------------------------------------------------
   Same design and dark background; only the shared home values: container +
   sizes scaled from the 1920px design, 80px top / bottom, 40px title -> content,
   12px corners. Both sliders are Swiper (js/home-why-choose.js):
     .wcu-visual  left pictures, fade        .wcu-swiper  right card drum, creative
   Pictures 5 + 6 (.wcu-props, .wcu-deploy) are built here in HTML/CSS.
   Tablet / mobile: cubix-responsive.css "11. Why Choose Us".
   ========================================================================== */

.home-page .why-choose-us{
	padding: calc(80 * var(--u)) 0;
}

.home-page .why-choose-us .container{
	max-width: var(--container-w);
}

.home-page .why-choose-us .section-row{
	margin-bottom: calc(40 * var(--u));
}

/* ---------- Left: one picture per card (fade Swiper) ---------- */
.home-page .wcu-visual{
	margin-right: calc(20 * var(--u));
	border-radius: calc(12 * var(--u));
}

.home-page .wcu-visual .wcu-visual-item{
	position: relative;                  /* Swiper lays the pictures out (custom.css stacked them by hand) */
	inset: auto;
	container-type: inline-size;         /* pictures 5 + 6 size their insides from this box (cqw) */
}

/* every picture: a white box with the Clients / Services card corners and border */
.home-page .wcu-visual .why-choose-chart-card,
.home-page .wcu-visual .wcu-calls,
.home-page .wcu-visual .wcu-cloud,
.home-page .wcu-visual .wcu-modules-card,
.home-page .wcu-visual .wcu-props,
.home-page .wcu-visual .wcu-deploy{
	height: 100%;
	border-radius: calc(12 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	background: var(--color-white);
	overflow: hidden;
}

/* the dots under the picture (Swiper pagination of the drum); centred under the picture.
   The negative bottom margin takes the dots (24px gap + 10px dot) out of the column height,
   so the drum on the right is centred on the picture itself */
.home-page .wcu-dots-pics{
	margin-right: calc(20 * var(--u));
	margin-bottom: -34px;
}

/* ---------- Right: the card drum (vertical Swiper) ----------
   js/home-why-choose.js sets the height and each card's place on the drum (transform, opacity) */
.home-page .wcu-swiper{
	overflow: visible;                   /* the tilted side cards may reach a little past the box */
	outline: none;
	row-gap: calc(24 * var(--u));        /* space between the centre card and the cards above / below (read by the JS) */
}

.home-page .wcu-swiper .swiper-wrapper{
	perspective: 1200px;
}

.home-page .wcu-swiper:focus-visible{
	outline: 2px solid rgba(var(--color-white-rgb), 0.5);
	outline-offset: calc(8 * var(--u));
	border-radius: calc(12 * var(--u));
}

/* the slides sit on top of each other, each filling the drum with its card in the middle */
.home-page .wcu-swiper .swiper-slide{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: transform 0.6s cubic-bezier(.22, 1, .36, 1), opacity 0.6s ease;
	will-change: transform, opacity;
}

.home-page .wcu-swiper .why-choose-item{
	width: 100%;
	margin: 0;
	padding: calc(24 * var(--u)) calc(30 * var(--u));
	border-radius: calc(12 * var(--u));
	cursor: pointer;
	pointer-events: auto;
}

.home-page .wcu-swiper .why-choose-item .icon-box{
	margin-right: calc(20 * var(--u));
}

.home-page .wcu-swiper .why-choose-item .icon-box img{
	max-width: calc(80 * var(--u));
}

.home-page .wcu-swiper .why-choose-item-content{
	width: calc(100% - 100 * var(--u));
}

/* title + text: same size and colour as the Services cards */
.home-page .wcu-swiper .why-choose-item-content h3{
	font-size: calc(20 * var(--u));
	line-height: 1.3;
	margin-bottom: calc(10 * var(--u));
	color: var(--color-primary);
}

.home-page .wcu-swiper .why-choose-item-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

/* the centre card: brand gradient, white text and icon */
.home-page .wcu-swiper .swiper-slide-active .why-choose-item{
	cursor: default;
}

.home-page .wcu-swiper .swiper-slide-active .why-choose-item:before{
	top: 0;
	bottom: auto;
	height: 100%;
}

.home-page .wcu-swiper .swiper-slide-active .why-choose-item-content h3,
.home-page .wcu-swiper .swiper-slide-active .why-choose-item-content p{
	color: var(--color-white);
}

.home-page .wcu-swiper .swiper-slide-active .why-choose-item .icon-box img{
	filter: brightness(0) invert(1);
}

/* the side cards don't light up on hover, so only the centre card stands out */
.home-page .wcu-swiper .swiper-slide:not(.swiper-slide-active) .why-choose-item:hover:before{
	height: 0;
}

.home-page .wcu-swiper .swiper-slide:not(.swiper-slide-active) .why-choose-item:hover .why-choose-item-content h3{
	color: var(--color-primary);
}

.home-page .wcu-swiper .swiper-slide:not(.swiper-slide-active) .why-choose-item:hover .why-choose-item-content p{
	color: rgba(var(--color-primary-rgb), 0.7);
}

.home-page .wcu-swiper .swiper-slide:not(.swiper-slide-active) .why-choose-item:hover .icon-box img{
	filter: none;
}

/* ---------- Stats strip under the drum (25+, 34+, ...): sizes scaled from the 1920px design,
   40px above and below the line (like title -> content everywhere). Tablet / mobile: custom.css ---------- */
.home-page .why-choose-us .why-choose-counter-list{
	gap: calc(30 * var(--u)) calc(50 * var(--u));
	margin-top: calc(60 * var(--u));
	padding-top: calc(40 * var(--u));
}

.home-page .why-choose-us .why-choose-counter-item{
	width: calc(25% - 37.5 * var(--u));
}

.home-page .why-choose-us .why-choose-counter-item:after{
	right: calc(-25 * var(--u));
}

.home-page .why-choose-us .why-choose-counter-item .icon-box{
	margin-bottom: calc(20 * var(--u));
}

.home-page .why-choose-us .why-choose-counter-item .icon-box img{
	max-width: calc(60 * var(--u));
}

.home-page .why-choose-us .why-choose-counter-content h3{
	font-size: calc(46 * var(--u));
	margin-bottom: calc(10 * var(--u));
	font-variant-numeric: tabular-nums;   /* the numbers don't wobble while counting */
}

.home-page .why-choose-us .why-choose-counter-content p{
	font-size: calc(18 * var(--u));
}

/* ---------- Pictures 5 + 6: shared look. Sizes follow the picture box width (cqw = 1% of
   .wcu-visual-item), so they fit the same at every screen size ---------- */
.home-page .wcu-props,
.home-page .wcu-deploy{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3.2cqw;
	padding: 5cqw 6cqw;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: clamp(11px, 2.4cqw, 15px);
	line-height: 1.4;
}

.home-page .wcu-props b,
.home-page .wcu-deploy b{
	font-family: var(--font-heading);
	font-weight: 600;
}

.home-page .wcu-props small,
.home-page .wcu-deploy small{
	display: block;
	font-size: 0.85em;
	color: rgba(var(--color-primary-rgb), 0.6);
}

/* ---------- Picture 5: property types (head, 3 tiles, tags, bar) ---------- */
.home-page .wcu-props-head{
	display: flex;
	align-items: center;
	gap: 2.6cqw;
}

.home-page .wcu-props-head b{
	display: block;
	font-size: 1.6em;
	line-height: 1.15;
}

.home-page .wcu-props-head small{
	font-size: 0.95em;
}

/* line icons (inline SVG): drawn with the text colour */
.home-page .wcu-props svg{
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-page .wcu-props-logo{
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 10cqw;
	height: 10cqw;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: var(--color-white);
}

.home-page .wcu-props-logo svg{
	width: 56%;
	height: 56%;
	stroke-width: 1.5;
}

.home-page .wcu-props-badge{
	margin-left: auto;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: var(--gradient-brand);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 1.15em;
	font-weight: 600;
	white-space: nowrap;
}

.home-page .wcu-props-tiles{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4cqw;
}

.home-page .wcu-props-tiles div{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2cqw;
	padding: 2.6cqw 1.5cqw;
	border-radius: 8px;
	background: var(--color-light);
	text-align: center;
}

.home-page .wcu-props-tiles svg{
	width: 8cqw;
	height: 8cqw;
}

.home-page .wcu-props-tiles b{
	font-size: 1.25em;
	line-height: 1.2;
}

.home-page .wcu-props-label{
	margin-bottom: -1.8cqw;              /* sits close to what it labels */
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--color-primary-rgb), 0.6);
}

.home-page .wcu-props-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 1.4cqw;
}

.home-page .wcu-props-tags span{
	padding: 0.35em 0.9em;
	border-radius: 999px;
	border: 1px solid rgba(var(--color-accent-rgb), 0.65);
	color: var(--color-primary);
	font-size: 0.9em;
}

/* gradient bar (pictures 5 + 6) */
.home-page .wcu-props-bar,
.home-page .wcu-deploy-bar{
	height: 1.4cqw;
	min-height: 6px;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), 0.08);
	overflow: hidden;
}

.home-page .wcu-props-bar i,
.home-page .wcu-deploy-bar i{
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gradient-brand);
	transform-origin: left center;
}

/* picture 5's bar is full, with a light sweep running along it (see the animations below) */
.home-page .wcu-props-bar i{
	position: relative;
	overflow: hidden;
}

.home-page .wcu-props-bar i::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--color-white-rgb), 0.55), transparent);
	transform: translateX(-100%);
}

/* ---------- Picture 6: go-live plan ---------- */
.home-page .wcu-deploy{
	gap: 4cqw;
}

.home-page .wcu-deploy-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.home-page .wcu-deploy-head b{
	font-size: 1.5em;
}

.home-page .wcu-deploy-live{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: var(--gradient-brand);
	color: var(--color-white);
	font-weight: 600;
}

.home-page .wcu-deploy-live::before{
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--color-white);
}

.home-page .wcu-deploy-steps{
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-page .wcu-deploy-steps li{
	position: relative;
	display: flex;
	align-items: center;
	gap: 3cqw;
	padding: 1.8cqw 0;
}

/* the line joining the step circles */
.home-page .wcu-deploy-steps li:not(:last-child)::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 3cqw;
	width: 2px;
	height: 100%;
	margin-left: -1px;
	background: rgba(var(--color-primary-rgb), 0.14);
}

.home-page .wcu-deploy-steps li span{
	flex: 1;
	font-weight: 600;
}

/* step circle: ringed; when done, filled with the gradient and ticked */
.home-page .wcu-deploy-steps i{
	position: relative;
	z-index: 1;
	flex: none;
	width: 6cqw;
	height: 6cqw;
	border-radius: 50%;
	border: 2px solid rgba(var(--color-primary-rgb), 0.14);
	background: var(--color-white);
}

.home-page .wcu-deploy-steps i::before{
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: var(--gradient-brand);
}

.home-page .wcu-deploy-steps i::after{
	content: "";
	position: absolute;
	top: 45%;
	left: 50%;
	width: 28%;
	height: 50%;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Pictures 5 + 6 come alive each time their card reaches the centre ---------- */
.home-page .wcu-visual-item.is-active .wcu-props-logo{
	animation: wcuPop 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.2s both;
}

/* the badge pops in, then keeps a soft pulse ring */
.home-page .wcu-visual-item.is-active .wcu-props-badge{
	animation:
		wcuPop 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.5s both,
		wcuPulse 2.6s ease-out 2s infinite;
}

/* the tiles rise one by one; each icon bounces in just after its tile */
.home-page .wcu-visual-item.is-active .wcu-props-tiles div{
	animation: wcuRise 0.8s cubic-bezier(.22, 1, .36, 1) calc(0.4s + var(--n) * 0.35s) both;
}

.home-page .wcu-visual-item.is-active .wcu-props-tiles svg{
	animation: wcuPop 0.6s cubic-bezier(.34, 1.56, .64, 1) calc(0.7s + var(--n) * 0.35s) both;
}

.home-page .wcu-visual-item.is-active .wcu-props-tags span{
	animation: wcuPop 0.6s cubic-bezier(.34, 1.56, .64, 1) calc(1.4s + var(--n) * 0.25s) both;
}

.home-page .wcu-visual-item.is-active .wcu-props-bar i{
	animation: wcuFill 2s cubic-bezier(.22, 1, .36, 1) 0.6s both;
}

.home-page .wcu-visual-item.is-active .wcu-props-bar i::after{
	animation: wcuShine 3s ease-in-out 2.8s infinite;
}

.home-page .wcu-visual-item.is-active .wcu-deploy-bar i{
	animation: wcuFill 2s linear 0.3s both;
}

.home-page .wcu-visual-item.is-active .wcu-deploy-steps i::before{
	animation: wcuPop 0.4s cubic-bezier(.34, 1.56, .64, 1) calc(0.6s + var(--n) * 0.5s) both;
}

.home-page .wcu-visual-item.is-active .wcu-deploy-steps i::after{
	animation: wcuTick 0.4s cubic-bezier(.34, 1.56, .64, 1) calc(0.6s + var(--n) * 0.5s) both;
}

.home-page .wcu-visual-item.is-active .wcu-deploy-live{
	animation: wcuLive 0.5s ease 2.3s both;
}

@keyframes wcuPop{
	from{ opacity: 0; transform: scale(0.4); }
}

@keyframes wcuTick{
	from{ opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.4); }
}

@keyframes wcuFill{
	from{ transform: scaleX(0); }
}

@keyframes wcuRise{
	from{ opacity: 0; transform: translateY(4cqw); }
}

@keyframes wcuPulse{
	from{ box-shadow: 0 0 0 0 rgba(var(--color-accent-2-rgb), 0.45); }
	to{ box-shadow: 0 0 0 2.4cqw rgba(var(--color-accent-2-rgb), 0); }
}

@keyframes wcuShine{
	from{ transform: translateX(-100%); }
	60%, to{ transform: translateX(100%); }
}

@keyframes wcuLive{
	from{ opacity: 0.35; filter: grayscale(1); transform: scale(0.9); }
}


/* ==========================================================================
   12. Testimonials (home page)
   --------------------------------------------------------------------------
   Same design (video button left, gradient quote card rising out of the photo
   box on the right); only the shared home values: container + sizes scaled
   from the 1920px design, 80px top / bottom, 40px title -> box, 12px corners.
   The slider is the template's Swiper (js/function.js).
   Tablet / mobile: cubix-responsive.css "12. Testimonials".
   ========================================================================== */

/* ---------- Section: container + 80px top / bottom, 40px title -> box (like every home section) ---------- */
.home-page .our-testimonials{
	padding: calc(80 * var(--u)) 0;
	/* white with the soft pink wash coming down from the top (same pink as the Services section) */
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 0%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 0%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		var(--color-white);
}

.home-page .our-testimonials .container{
	max-width: var(--container-w);
}

.home-page .our-testimonials .section-title{
	margin-bottom: calc(40 * var(--u));
}

/* ---------- Big photo box: 12px corners like the other home boxes ---------- */
.home-page .our-testimonials .testimonial-box{
	gap: calc(40 * var(--u)) calc(30 * var(--u));
}

.home-page .our-testimonials .testimonial-box,
.home-page .our-testimonials .testimonial-box::before{
	border-radius: calc(12 * var(--u));
}

/* the two halves: half the box each, minus half of the (scaled) gap between them */
.home-page .our-testimonials .testimonial-video-button,
.home-page .our-testimonials .testimonial-slider-box{
	width: calc(50% - 15 * var(--u));
}

/* ---------- Left: video button ---------- */
.home-page .our-testimonials .testimonial-video-button a{
	width: calc(74 * var(--u));
	height: calc(74 * var(--u));
}

/* the pulsing rings around it grow with the button (a fixed 50px ring squashed into a blob) */
.home-page .our-testimonials .testimonial-video-button a:before,
.home-page .our-testimonials .testimonial-video-button a:after{
	border-width: calc(50 * var(--u));
}

.home-page .our-testimonials .testimonial-video-button a i{
	font-size: calc(30 * var(--u));
}

.home-page .our-testimonials .testimonial-video-button h3{
	margin-top: calc(40 * var(--u));
	font-size: calc(18 * var(--u));
}

/* ---------- Right: gradient card (rises above the box; bottom-right corner stays square) ---------- */
.home-page .our-testimonials .testimonial-slider{
	margin-top: calc(-135 * var(--u));
	padding: calc(40 * var(--u));
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 calc(12 * var(--u));
}

.home-page .our-testimonials .testimonial-header{
	justify-content: flex-end;   /* only the quote mark here, on the right */
	gap: calc(20 * var(--u));
	margin-bottom: calc(40 * var(--u));
}

.home-page .our-testimonials .testimonial-company-logo img{
	max-width: calc(165 * var(--u));
	max-height: calc(40 * var(--u));
}

.home-page .our-testimonials .testimonial-quote img{
	max-width: calc(30 * var(--u));
}

.home-page .our-testimonials .testimonial-content{
	margin-bottom: calc(30 * var(--u));
}

/* quote text: 16px like the Services card text */
.home-page .our-testimonials .testimonial-content p{
	font-size: calc(16 * var(--u));
	margin-bottom: calc(20 * var(--u));
}

.home-page .our-testimonials .testimonial-content p:last-child{
	margin-bottom: 0;
}

/* name row: keeps clear of the prev / next buttons at the bottom right */
.home-page .our-testimonials .testimonial-body{
	padding-right: calc(110 * var(--u));
}

/* the client's logo on a small white card (the logos are on white) */
.home-page .our-testimonials .author-image{
	flex-shrink: 0;
	margin-right: calc(20 * var(--u));
}

.home-page .our-testimonials .author-image figure{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(110 * var(--u));
	height: calc(64 * var(--u));
	padding: calc(8 * var(--u));
	border-radius: calc(8 * var(--u));
	background: var(--color-white);
}

.home-page .our-testimonials .author-image img{
	width: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
	object-fit: contain;
}

.home-page .our-testimonials .author-content{
	width: auto;
	flex: 1;
	min-width: 0;
}

.home-page .our-testimonials .author-content h3{
	font-size: calc(20 * var(--u));
	margin-bottom: calc(5 * var(--u));
}

.home-page .our-testimonials .author-content p{
	font-size: calc(16 * var(--u));
}

/* prev / next: 40px round buttons like the Services arrows */
.home-page .our-testimonials .testimonial-btn{
	bottom: calc(5 * var(--u));
}

.home-page .our-testimonials .testimonial-slider .testimonial-button-next,
.home-page .our-testimonials .testimonial-slider .testimonial-button-prev{
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
}

.home-page .our-testimonials .testimonial-slider .testimonial-button-next{
	margin-left: calc(15 * var(--u));
}

.home-page .our-testimonials .testimonial-slider .testimonial-button-next::before,
.home-page .our-testimonials .testimonial-slider .testimonial-button-prev::before{
	font-size: calc(18 * var(--u));
}

/* ---------- Under the card: phone line + button ---------- */
.home-page .our-testimonials .testimonial-contact-info{
	gap: calc(30 * var(--u));
	padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) 0;
}

.home-page .our-testimonials .testimonial-contact-box{
	width: calc(65% - 15 * var(--u));
}

.home-page .our-testimonials .testimonial-contact-btn{
	width: calc(35% - 15 * var(--u));
}

.home-page .our-testimonials .testimonial-contact-btn .btn-default{
	white-space: nowrap;                 /* "Contact Us" stays on one line */
}

.home-page .our-testimonials .testimonial-contact-box .icon-box{
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	margin-right: calc(20 * var(--u));
}

.home-page .our-testimonials .testimonial-contact-box .icon-box img{
	max-width: calc(30 * var(--u));
}

.home-page .our-testimonials .testimonial-contact-content{
	width: calc(100% - 80 * var(--u));
}

.home-page .our-testimonials .testimonial-contact-content p{
	font-size: calc(16 * var(--u));
}


/* ==========================================================================
   13. Footer (all pages)
   --------------------------------------------------------------------------
   Same design (gradient footer: top row newsletter | logo | social links,
   4 link columns (col-lg-3 each), copyright line). Only the shared home values: container + sizes
   scaled from the 1920px design. Same footer on every page.
   Tablet / mobile: cubix-responsive.css "13. Footer".
   ========================================================================== */

.main-footer{
	padding-top: calc(56 * var(--u));
}

.main-footer .container{
	max-width: var(--container-w);
}

/* ---------- Top row: newsletter (left) | logo (middle) | social links (right) ---------- */
.main-footer .footer-header{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: calc(40 * var(--u));
	margin-bottom: calc(40 * var(--u));
	padding-bottom: calc(28 * var(--u));
}

.main-footer .footer-header .footer-newsletter-form{
	justify-self: start;
	width: 100%;
	max-width: calc(420 * var(--u));
	margin: 0;
}

.main-footer .footer-header .footer-logo{
	justify-self: center;
}

.main-footer .footer-header .footer-social-links{
	justify-self: end;
}

.main-footer .footer-logo img{
	max-width: calc(223 * var(--u));
}

.main-footer .footer-social-links ul li{
	margin-right: calc(12 * var(--u));
}

.main-footer .footer-social-links ul li:last-child{
	margin-right: 0;
}

.main-footer .footer-social-links ul li a{
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
}

.main-footer .footer-social-links ul li a i{
	font-size: calc(16 * var(--u));
}

/* ---------- Columns: headings 20px, links 16px ---------- */
.main-footer .footer-quick-links{
	margin-left: 0;
}

.main-footer .footer-links h3{
	font-size: calc(20 * var(--u));
	margin-bottom: calc(16 * var(--u));
}

.main-footer .footer-links p{
	font-size: calc(16 * var(--u));
	margin-bottom: calc(24 * var(--u));
}

.main-footer .footer-links ul li{
	font-size: calc(16 * var(--u));
	margin-bottom: calc(8 * var(--u));
}

.main-footer .footer-links ul li:last-child{
	margin-bottom: 0;
}

/* newsletter: input + round send button */
.main-footer .footer-newsletter-form .form-group .form-control{
	width: calc(100% - 66 * var(--u));
	padding: calc(14 * var(--u)) calc(20 * var(--u));
	font-size: calc(16 * var(--u));
}

.main-footer .footer-newsletter-form .form-group .newsletter-btn{
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	margin-left: calc(10 * var(--u));
}

.main-footer .footer-newsletter-form .form-group .newsletter-btn i{
	font-size: calc(24 * var(--u));
}

/* contact column: round outlined icon (like the social links) before each line */
.main-footer .footer-contact-links ul li{
	display: flex;
	align-items: flex-start;
	gap: calc(12 * var(--u));
}

.main-footer .footer-contact-links .footer-contact-icon{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	border: 1px solid var(--color-white);
	border-radius: 50%;
}

.main-footer .footer-contact-links .footer-contact-icon i{
	font-size: calc(13 * var(--u));
	color: var(--color-white);
}

/* the phone number never breaks at its hyphen */
.main-footer .footer-contact-links a[href^="tel:"]{
	white-space: nowrap;
}

/* ---------- Copyright line ---------- */
.main-footer .footer-copyright{
	margin-top: calc(40 * var(--u));
	padding: calc(18 * var(--u)) 0;
}

.main-footer .footer-copyright-text p{
	font-size: calc(16 * var(--u));
}


/* ==========================================================================
   14. Preloader (all pages)
   --------------------------------------------------------------------------
   HTML: #cx-preloader (every page)   JS: js/site-preloader.js
   Gradient screen with a spinning ring around the Cubix mark (white disc, the
   mark is cut from images/logo/logo-light.png), the letters C U B I X flipping
   in one by one and "Cubix Technology Ltd". On load (.is-loaded) the content
   fades and the screen pulls away in 4 strips that together show one gradient.
   ========================================================================== */

/* the scrollbar's space is always kept, so the screen never changes width when
   the scrollbar comes or goes (that nudged the loader's content sideways) */
html{
	scrollbar-gutter: stable;
}

/* no scrolling while the loader shows (scrolling comes back as soon as the strips start to pull away);
   the empty scrollbar space takes the loader's right-edge colour instead of showing a white strip */
html:has(.cx-preloader:not(.is-loaded)){
	overflow: hidden;
	background-color: var(--color-accent-2);
}

.cx-preloader{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}

/* ---------- The 4 strips (the background) ---------- */
.cx-preloader-panels{
	position: absolute;
	inset: 0;
	display: flex;
	pointer-events: none;
}

.cx-preloader-panels i{
	position: relative;
	flex: 1;
}

/* each strip shows its quarter of one screen-wide gradient, so together they look like one */
.cx-preloader-panels i::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--gradient-brand);
	background-size: 100vw 100%;
	transition: width 0.7s 0.3s cubic-bezier(.77, 0, .175, 1);
}

.cx-preloader-panels i:nth-child(2)::before{ background-position: -25vw 0; }
.cx-preloader-panels i:nth-child(3)::before{ background-position: -50vw 0; }
.cx-preloader-panels i:nth-child(4)::before{ background-position: -75vw 0; }

/* ---------- Content ---------- */
.cx-preloader-content{
	position: relative;
	z-index: 1;
	text-align: center;
	transition: opacity 0.3s ease-out;
}

/* spinning ring; the mark in the middle stays still */
.cx-preloader-spinner{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(140 * var(--u));
	height: calc(140 * var(--u));
	margin: 0 auto calc(40 * var(--u));
}

.cx-preloader-spinner::before{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid rgba(var(--color-white-rgb), 0.25);
	border-top-color: var(--color-white);
	animation: cxSpin 1s linear infinite;
}

/* white disc with the Cubix mark */
.cx-preloader-mark{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(96 * var(--u));
	height: calc(96 * var(--u));
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.25);
}

/* the mark = the left 135 x 138px of the header logo image (500 x 138); this box shows only that part */
.cx-preloader-mark::before{
	content: "";
	height: 58%;
	aspect-ratio: 135 / 138;
	background: url("../images/logo/logo-light.png") no-repeat left center;
	background-size: auto 100%;
}

/* C U B I X: faint letters; a white copy of each flips in one after another */
.cx-preloader-letters{
	display: flex;                       /* fixed 1em tall row: when the web font arrives a moment later, nothing moves */
	justify-content: center;
	height: 1em;
	font-family: var(--font-display);
	font-size: calc(80 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	user-select: none;
}

.cx-preloader-letters span{
	position: relative;
	display: block;
	height: 1em;
	color: rgba(var(--color-white-rgb), 0.25);
}

.cx-preloader-letters span::before{
	content: attr(data-letter);
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-white);
	opacity: 0;
	transform: rotateY(-90deg);
	animation: cxLetter 4s infinite;
}

.cx-preloader-letters span:nth-child(2)::before{ animation-delay: 0.2s; }
.cx-preloader-letters span:nth-child(3)::before{ animation-delay: 0.4s; }
.cx-preloader-letters span:nth-child(4)::before{ animation-delay: 0.6s; }
.cx-preloader-letters span:nth-child(5)::before{ animation-delay: 0.8s; }

.cx-preloader-content p{
	height: 1.5em;                       /* fixed height, same reason as the letters */
	margin: calc(20 * var(--u)) 0 0;
	line-height: 1.5;
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	font-weight: 600;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--color-white);
}

/* the letters + name stay hidden until their web fonts have loaded (js adds .is-fonts-ready), then fade in */
.cx-preloader-letters,
.cx-preloader-content p{
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cx-preloader.is-fonts-ready .cx-preloader-letters,
.cx-preloader.is-fonts-ready .cx-preloader-content p{
	opacity: 1;
}

/* ---------- Loaded: content fades, then the strips pull away to the left ---------- */
.cx-preloader.is-loaded .cx-preloader-content{
	opacity: 0;
}

.cx-preloader.is-loaded .cx-preloader-panels i::before{
	width: 0;
}

@keyframes cxSpin{
	to{ transform: rotate(360deg); }
}

@keyframes cxLetter{
	0%, 75%, 100%{ opacity: 0; transform: rotateY(-90deg); }
	25%, 50%     { opacity: 1; transform: rotateY(0deg); }
}


/* ==========================================================================
   15. Back to top (all pages)
   --------------------------------------------------------------------------
   HTML: #cx-back-top (every page)   JS: js/site-back-top.js
   Round gradient button, bottom right. Hidden at the top of the page, fades in
   after 400px; the white ring fills with the scroll progress (--p: 0 .. 1).
   ========================================================================== */

.cx-back-top{
	position: fixed;
	right: calc(30 * var(--u));
	bottom: calc(30 * var(--u));
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(50 * var(--u));
	height: calc(50 * var(--u));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: var(--color-white);
	box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(var(--color-accent-2-rgb), 0.35);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.3s ease;
}

.cx-back-top.is-visible{
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cx-back-top.is-visible:hover{
	transform: translateY(-4px);
	box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(var(--color-accent-2-rgb), 0.5);
}

.cx-back-top:focus-visible{
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.cx-back-top i{
	position: relative;
	font-size: calc(18 * var(--u));
}

/* scroll-progress ring on the button's edge: faint track + white bar that fills clockwise from the top */
.cx-back-top-ring{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.cx-back-top-ring circle{
	fill: none;
	stroke-width: 2;
}

.cx-back-top-ring .track{
	stroke: rgba(var(--color-white-rgb), 0.3);
}

.cx-back-top-ring .bar{
	stroke: var(--color-white);
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	stroke-dashoffset: calc(100 - var(--p, 0) * 100);
}


/* ==========================================================================
   16. Page header (inner pages)
   --------------------------------------------------------------------------
   The photo banner at the top of every inner page: page title + breadcrumb
   (<div class="page-header"> ... <div class="page-header-box">). Same design;
   container + sizes scaled from the 1920px design, colours from the tokens,
   the current page in the breadcrumb in the brand gradient.
   Tablet / mobile: cubix-responsive.css "16. Page header".
   ========================================================================== */

.page-header{
	height: calc(400 * var(--u));
	padding: 0;
}

.page-header .container{
	max-width: var(--container-w);
}

/* dark navy wash over the photo, stronger on the left where the text is */
.page-header::before{
	background: linear-gradient(270deg, rgba(var(--color-primary-rgb), 0.28) 43.57%, rgba(var(--color-primary-rgb), 0.8) 100%);
}

/* each page its own photo (WebP, 1920 x 772); other pages keep custom.css's page-header-bg.jpg.
   Phones get a smaller 3:2 crop: cubix-responsive.css "16. Page header" */
.page-header.page-header-about{
	background-image: url('../images/page-header/about.webp');
}

.page-header.page-header-services{
	background-image: url('../images/page-header/services.webp');
}

.page-header.page-header-products{
	background-image: url('../images/page-header/products.webp');
}

.page-header.page-header-contact{
	background-image: url('../images/page-header/contact.webp');
}

/* the fixed header sits over the banner: the text is pushed below it */
.page-header-box{
	margin-top: calc(80 * var(--u));
}

.page-header-box h1{
	margin-bottom: calc(10 * var(--u));
	font-family: var(--font-display);
	font-size: calc(46 * var(--u));      /* = the home section titles */
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-white);
}

.page-header-box ol li.breadcrumb-item{
	font-size: calc(16 * var(--u));
	color: var(--color-white);
}

.page-header-box ol li.breadcrumb-item a{
	color: var(--color-white);
	transition: opacity 0.3s ease;
}

.page-header-box ol li.breadcrumb-item a:hover{
	opacity: 0.75;
}

.page-header-box ol .breadcrumb-item + .breadcrumb-item{
	padding-left: calc(8 * var(--u));
}

.page-header-box ol .breadcrumb-item + .breadcrumb-item::before{
	padding-right: calc(8 * var(--u));
	color: rgba(var(--color-white-rgb), 0.6);
}

/* current page: brand gradient text */
.page-header-box ol li.breadcrumb-item.active{
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* ==========================================================================
   17. Contact page
   --------------------------------------------------------------------------
   HTML: contact.html (.page-contact-us, .google-map). Same design: gradient
   office list overlapping the top of a dark photo box that holds the form,
   then the map. Only the shared values: container + sizes scaled from the
   1920px design, 80px top / bottom, 40px title -> content, 12px corners,
   colours from the tokens. Tablet / mobile: cubix-responsive.css "17. Contact page".
   ========================================================================== */

.page-contact-us{
	padding: calc(80 * var(--u)) 0;
}

.page-contact-us .container{
	max-width: var(--container-w);
}

.page-contact-us .section-row{
	margin-bottom: calc(40 * var(--u));
}

.page-contact-us .section-row .section-title{
	max-width: calc(900 * var(--u));
}

/* ---------- Dark photo box (holds the office list + the form) ---------- */
.page-contact-box{
	margin-top: calc(150 * var(--u));
	padding: 0 calc(120 * var(--u)) calc(60 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	box-shadow: 0 0 calc(100 * var(--u)) 2px rgba(var(--color-black-rgb), 0.05);
}

.page-contact-box:before{
	border-radius: calc(12 * var(--u));
}

/* ---------- Office list: gradient card rising out of the top of the box ---------- */
.contact-info-list{
	gap: calc(30 * var(--u)) calc(80 * var(--u));
	padding: calc(40 * var(--u));
	margin: calc(-150 * var(--u)) 0 calc(40 * var(--u));
	border-radius: calc(12 * var(--u));
}

.contact-info-item{
	width: calc(33.33% - 53.33 * var(--u));
}

.contact-info-item:before{
	right: calc(-40 * var(--u));
}

/* 4 offices (Dhaka, Cox's Bazar, USA, UAE): 2 per row, like the About page */
.page-contact-us .contact-info-item{
	width: calc((100% - 80 * var(--u)) / 2);
}

/* the dividing line only between the two offices of a row
   (custom.css hides it on every 3rd office, for its 3-per-row layout) */
.page-contact-us .contact-info-item:nth-child(2n + 1):before{
	display: block;
}

.page-contact-us .contact-info-item:nth-child(2n):before,
.page-contact-us .contact-info-item:last-child:before{
	display: none;
}

/* short line on what the office does, above its address */
.page-contact-us .contact-info-content .contact-info-desc{
	margin-bottom: calc(10 * var(--u));
}

.contact-info-item .icon-box{
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	margin-bottom: calc(20 * var(--u));
}

.contact-info-item .icon-box img{
	max-width: calc(30 * var(--u));
}

.contact-info-content h3{
	font-size: calc(20 * var(--u));
	margin-bottom: calc(10 * var(--u));
}

.contact-info-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
}

/* ---------- Form ---------- */
.contact-us-form .section-title{
	margin-bottom: calc(30 * var(--u));
}

.member-contact-form.contact-form .form-control{
	padding: calc(12 * var(--u)) calc(18 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	font-size: calc(15 * var(--u));
	color: var(--color-primary);
}

.member-contact-form.contact-form .form-control::placeholder{
	color: rgba(var(--color-primary-rgb), 0.6);
}

.member-contact-form.contact-form .form-control:focus{
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

.member-contact-form.contact-form select.form-control{
	padding-right: calc(48 * var(--u));
	background-position: right calc(20 * var(--u)) center;
}

/* the second list stays disabled until a first choice is made (js/contact-catalog.js) */
.member-contact-form.contact-form select.form-control:disabled{
	background-color: var(--color-light);
	border-color: rgba(var(--color-primary-rgb), 0.14);
	color: var(--color-text);
}

/* ---------- Form: labels above the fields, error text under them ---------- */
.contact-us-form form{
	text-align: left;                    /* the box centres its title; the form reads left to right */
}

.member-contact-form.contact-form .form-group{
	margin-bottom: calc(18 * var(--u));
}

.member-contact-form.contact-form .form-label{
	display: block;
	margin-bottom: calc(6 * var(--u));
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
}

/* the * of a required field (also in the note above the button) */
.member-contact-form.contact-form .form-label span,
.contact-form-note span{
	color: var(--color-accent);
}

.member-contact-form.contact-form textarea.form-control{
	min-height: calc(120 * var(--u));
	resize: vertical;
}

/* a field with a problem: pink border + the message under it (validator.js) */
.member-contact-form.contact-form .has-error .form-control{
	border-color: var(--color-accent-2);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-2-rgb), 0.25);
}

.member-contact-form.contact-form .help-block.with-errors ul{
	margin: calc(6 * var(--u)) 0 0;
}

.member-contact-form.contact-form .help-block.with-errors ul li{
	font-size: calc(14 * var(--u));
	font-weight: 500;
	color: var(--color-white);
}

.member-contact-form.contact-form .help-block.with-errors ul li::before{
	content: "! ";
	color: var(--color-accent-2);
	font-weight: 700;
}

/* note + button + result message, centred under the fields */
.contact-form-actions{
	text-align: center;
}

.contact-form-note{
	margin: 0 0 calc(16 * var(--u));
	font-size: calc(14 * var(--u));
	color: rgba(var(--color-white-rgb), 0.7);
}

/* Send + Reset side by side (the one site button for both) */
.contact-form-buttons{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(16 * var(--u));
}

/* Send: faded until every required field is filled (validator.js adds .disabled);
   Reset: faded and not clickable while the form is empty (js/contact-catalog.js) */
.contact-form-actions .btn-default.disabled,
.contact-form-actions .btn-default:disabled{
	opacity: 0.6;
}

.contact-form-actions .btn-default:disabled{
	cursor: not-allowed;
}

/* a faded button doesn't react to the mouse: no colour slide, no glow, no arrow nudge */
.contact-form-actions .btn-default.disabled:hover,
.contact-form-actions .btn-default.disabled:focus,
.contact-form-actions .btn-default:disabled:hover{
	background-position: 0 0;
	box-shadow: 0 8px 24px rgba(var(--color-accent-2-rgb), 0.25);
}

.contact-form-actions .btn-default.disabled:hover::before,
.contact-form-actions .btn-default:disabled:hover::before{
	transform: translate(calc(-30 * var(--u)), -50%);
}

/* the result message after sending (js/function.js) */
.contact-us-form #msgSubmit{
	margin: calc(16 * var(--u)) 0 0;
	font-family: var(--font-body);
	font-size: calc(16 * var(--u));
	font-weight: 600;
	line-height: 1.5;
}

.contact-us-form #msgSubmit.text-success{
	color: var(--color-white) !important;      /* over Bootstrap's green */
}

.contact-us-form #msgSubmit.text-danger{
	color: var(--color-accent-2) !important;   /* over Bootstrap's red */
}

/* ---------- Styled dropdowns (js/cx-select.js): a button + a list in the site style;
   the real <select> stays inside, hidden, and keeps the value ---------- */
.cx-select{
	position: relative;
}

.cx-select .cx-select-native{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* the button looks like the other fields */
.cx-select-btn{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: calc(12 * var(--u)) calc(44 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: calc(15 * var(--u));
	line-height: 1.5;
	text-align: left;
	color: var(--color-primary);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cx-select-value{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cx-select.is-empty .cx-select-value{
	color: rgba(var(--color-primary-rgb), 0.6);
}

/* chevron, turns up when open */
.cx-select-btn::after{
	content: "";
	position: absolute;
	top: 50%;
	right: calc(20 * var(--u));
	width: 8px;
	height: 8px;
	border: solid rgba(var(--color-primary-rgb), 0.6);
	border-width: 0 2px 2px 0;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.25s ease;
}

.cx-select.is-open .cx-select-btn::after{
	transform: translateY(-30%) rotate(-135deg);
}

.cx-select-btn:focus-visible,
.cx-select.is-open .cx-select-btn{
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
}

.cx-select.is-disabled .cx-select-btn{
	background: var(--color-light);
	color: var(--color-text);
	cursor: not-allowed;
}

.has-error .cx-select-btn{
	border-color: var(--color-accent-2);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-2-rgb), 0.25);
}

/* the list: white card under the button */
.cx-select-list{
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 260px;
	margin: 0;
	padding: calc(6 * var(--u));
	overflow-y: auto;
	list-style: none;
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(var(--color-primary-rgb), 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.cx-select.is-open .cx-select-list{
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cx-select-list li{
	position: relative;
	padding: calc(10 * var(--u)) calc(36 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
	border-radius: calc(8 * var(--u));
	font-size: calc(15 * var(--u));
	line-height: 1.4;
	color: var(--color-primary);
	cursor: pointer;
}

.cx-select-list li.is-active{
	background: rgba(var(--color-accent-rgb), 0.12);
}

/* the chosen one: gradient text + a tick */
.cx-select-list li.is-selected{
	font-weight: 600;
}

.cx-select-list li.is-selected::after{
	content: "";
	position: absolute;
	top: 50%;
	right: calc(16 * var(--u));
	width: 6px;
	height: 11px;
	border: solid var(--color-accent-2);
	border-width: 0 2px 2px 0;
	transform: translateY(-60%) rotate(45deg);
}

/* ---------- Map ---------- */
.google-map-iframe,
.google-map-iframe iframe{
	height: calc(650 * var(--u));
}


/* ==========================================================================
   18. About page
   --------------------------------------------------------------------------
   HTML: about.html <body class="about-page"> (base styles: custom.css)
   Same look as the home page: 80px top / bottom in every section, 40px from the
   title to the content, home section titles (.nm-heading), lead text 18px,
   cards like the home Services cards (radius 12, thin border, very light shadow,
   20px gaps). The old grey sections (Mission, Journey, call to action) are now
   white with the home page's soft pink wash at the bottom.
   Sections: .about-who, .about-mission, .about-why, .about-journey,
             #about-locations, .about-cta
   ========================================================================== */

/* ---------- All sections: same space as the home sections ---------- */
.about-page .about-who,
.about-page .about-mission,
.about-page .about-why,
.about-page .about-journey,
.about-page #about-locations,
.about-page .about-cta{
	position: relative;
	padding: calc(80 * var(--u)) 0;
}

/* container scales like the home sections (lines up with the logo and the Book Demo button) */
.about-page .about-who .container,
.about-page .about-mission .container,
.about-page .about-why .container,
.about-page .about-journey .container,
.about-page #about-locations .container,
.about-page .about-cta .container{
	max-width: var(--container-w);
}

/* title -> content: 40px (custom.css gives 80px) */
.about-page .section-row{
	margin-bottom: calc(40 * var(--u));
}

.about-page .section-row .section-title{
	max-width: calc(720 * var(--u));
}

/* lead text under a title: like the home About text */
.about-page .section-title p{
	margin: calc(20 * var(--u)) 0 0;
	font-size: calc(18 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

/* ---------- Pink wash: replaces the grey backgrounds (same as the home Clients / Services bottom) ---------- */
.about-page .about-mission,
.about-page .about-journey,
.about-page .about-cta{
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 100%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 100%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		var(--color-white);
}

/* Our Journey: the pink starts at the very top of the section (a light wash over its whole height),
   with the same corner glow at the bottom */
.about-page .about-journey{
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 100%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 100%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		linear-gradient(to bottom, rgba(var(--color-accent-2-rgb), 0.045), rgba(var(--color-accent-2-rgb), 0.025)),
		var(--color-white);
}

/* the grey layer over the old photo background */
.about-page .about-mission::before{
	display: none;
}

/* ---------- Who we are: photos + text ---------- */
.about-page .about-who .about-us-image{
	gap: calc(20 * var(--u));
	margin-right: calc(20 * var(--u));
}

.about-page .about-who .about-image-box{
	width: calc(50% - 10 * var(--u));
}

.about-page .about-who .about-img-2{
	margin-bottom: calc(20 * var(--u));
}

.about-page .about-who figure,
.about-page .about-who figure img{
	border-radius: calc(12 * var(--u));
}

/* the three photos (images/about/) are wide; the frames crop them (tall left, squares right),
   so each keeps its subject in view: the shield on the rack, both screens, the tablet + card reader */
.about-page .about-who .about-who-photo-security{ object-position: 50% 50%; }
.about-page .about-who .about-who-photo-development{ object-position: 85% 50%; }
.about-page .about-who .about-who-photo-hospitality{ object-position: 45% 50%; }

/* round badge between the photos: "24/7 SUPPORT • TALK TO OUR TEAM" turning around a headset icon
   (the old "Get free cyber security" image is not used here; position from custom.css .get-free-security-circle) */
.about-page .about-who .about-support-badge a{
	position: relative;
	display: block;
	width: calc(166 * var(--u));
	height: calc(166 * var(--u));
	border-radius: 50%;
	background: var(--gradient-brand);
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.18);
}

/* the text ring turns slowly (20s a turn, like the old badge); the icon stays upright */
.about-page .about-who .about-badge-ring{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: about-badge-turn 20s linear infinite;
}

.about-page .about-who .about-badge-ring text{
	fill: var(--color-white);
	font-family: var(--font-body);
	font-size: 13px;                     /* SVG units: the badge is drawn 168 wide and scales with it */
	font-weight: 700;
}

@keyframes about-badge-turn{
	to{ transform: rotate(360deg); }
}

/* white circle in the middle with the gradient headset icon */
.about-page .about-who .about-badge-core{
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 58%;
	height: 58%;
	border-radius: 50%;
	background: var(--color-white);
	transform: translate(-50%, -50%);
}

.about-page .about-who .about-badge-core i{
	font-size: calc(36 * var(--u));
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.about-page .about-who .about-support-badge a:hover .about-badge-core i{
	transform: scale(1.1);
}

.about-page .about-who .about-us-content .section-title{
	margin-bottom: 0;
}

/* ---------- Cards (Mission / Vision and Why choose Cubix): like the home Services cards ---------- */
.about-page .mission-vision-item{
	padding: calc(30 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
}

.about-page .mission-vision-item .icon-box{
	margin-right: calc(30 * var(--u));
}

.about-page .mission-vision-item .icon-box img{
	max-width: calc(80 * var(--u));
}

.about-page .mission-vision-content{
	width: calc(100% - 110 * var(--u));
}

.about-page .mission-vision-content h3{
	margin-bottom: calc(10 * var(--u));
	font-size: calc(20 * var(--u));
	line-height: 1.3;
}

.about-page .mission-vision-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

/* white text on the gradient that rises on hover (custom.css) */
.about-page .mission-vision-item:hover .mission-vision-content p{
	color: var(--color-white);
}

/* ---------- Mission / Vision: two cards overlapping the photo ---------- */
.about-page .about-mission .our-approach-content{
	margin-right: calc(-110 * var(--u));
}

.about-page .about-mission .mission-vision-item{
	margin-bottom: calc(20 * var(--u));
}

.about-page .about-mission .mission-vision-item:last-child{
	margin-bottom: 0;
}

.about-page .about-mission .our-approach-image figure,
.about-page .about-mission .our-approach-image img{
	border-radius: calc(12 * var(--u));
}

/* animation layer: an svg over the photo, in the photo's own coordinates (about.html) */
.about-page .about-mission .mission-fx{
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;                         /* light only adds to the photo, like real neon */
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* hidden while the picture slides in (the layer would slide with the frame, not the picture) */
.about-page .about-mission .our-approach-image figure.is-revealing .mission-fx{
	opacity: 0;
	transition: none;
}

/* ring scanner: every 3.5s the rings light up one after another, outside -> bullseye */
.about-page .about-mission .mission-ring,
.about-page .about-mission .mission-ripple{
	fill: none;
	stroke: rgba(var(--color-accent-rgb), 1);
	stroke-width: 5;
	opacity: 0;
}

.about-page .about-mission .mission-ring-pink,
.about-page .about-mission .mission-ripple{
	stroke: rgba(var(--color-accent-2-rgb), 1);
}

.about-page .about-mission .mission-ring{
	animation: about-mission-ring 3.5s ease-out infinite;
	animation-delay: calc(var(--i) * 0.22s);
}

@keyframes about-mission-ring{
	0%        { opacity: 0; }
	7%        { opacity: 1; }
	24%, 100% { opacity: 0; }
}

/* ripple: when the scan reaches the bullseye, one ring spreads out past the target and fades */
.about-page .about-mission .mission-ripple{
	stroke-width: 3;
	transform-box: fill-box;
	transform-origin: center;
	animation: about-mission-ripple 3.5s ease-out infinite;
	animation-delay: 1.05s;
}

@keyframes about-mission-ripple{
	0%        { opacity: 0;    transform: scale(1); }
	3%        { opacity: 0.9;  transform: scale(1); }
	41%, 100% { opacity: 0;    transform: scale(6.5); }
}

/* city lights: a few window lights fade in and out, each at its own pace */
.about-page .about-mission .mission-light{
	fill: var(--color-white);
	opacity: 0;
	animation: about-mission-twinkle calc(3.2s + var(--i) * 0.45s) ease-in-out infinite;
	animation-delay: calc(var(--i) * -0.9s);
}

.about-page .about-mission .mission-light:nth-child(3n){
	fill: rgba(var(--color-accent-2-rgb), 1);
}

.about-page .about-mission .mission-light:nth-child(3n+1){
	fill: rgba(var(--color-accent-rgb), 1);
}

@keyframes about-mission-twinkle{
	0%, 100% { opacity: 0; }
	50%      { opacity: 0.55; }
}

/* ---------- Why choose Cubix: 2 x 2 cards, 20px gaps, same height per row ---------- */
.about-page .about-why .container > .row:last-child{
	margin: 0 calc(-10 * var(--u)) calc(-20 * var(--u));
}

.about-page .about-why .container > .row:last-child > *{
	display: flex;
	padding: 0 calc(10 * var(--u));
}

.about-page .about-why .mission-vision-item{
	width: 100%;
	margin-bottom: calc(20 * var(--u));
}

/* no icon in these cards: the text uses the full width */
.about-page .about-why .mission-vision-content{
	width: 100%;
}

/* ---------- Our journey: centred title like the other sections, chart + number cards ---------- */
.about-page .about-journey .journey-section-content{
	padding: 0;
}

.about-page .about-journey .journey-section-content > .section-title{
	margin: 0 0 calc(40 * var(--u));
	text-align: center;
}

/* the long title stays on one line; the text below keeps the narrow width of the other titles */
.about-page .about-journey .journey-section-content > .section-title p{
	max-width: calc(720 * var(--u));
	margin-right: auto;
	margin-left: auto;
}

.about-page .about-journey .journey-layout{
	row-gap: calc(20 * var(--u));
	margin: 0 calc(-10 * var(--u));
}

.about-page .about-journey .journey-layout > [class*="col-"]{
	padding: 0 calc(10 * var(--u));
}

.about-page .about-journey .journey-chart-panel,
.about-page .about-journey .journey-milestone-card{
	min-height: calc(350 * var(--u));
	padding: calc(30 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
}

/* chart columns: the Bootstrap gutter (15px) scales with the page, or the 7 years no longer fit
   in one row on 1200-1400px screens and 2026 drops to a second line */
.about-page .about-journey .journey-chart-bars{
	margin-right: calc(-15 * var(--u));
	margin-left: calc(-15 * var(--u));
}

.about-page .about-journey .journey-chart-bars .col{
	padding-right: calc(15 * var(--u));
	padding-left: calc(15 * var(--u));
}

/* rectangular cards (wider than tall on every screen): the bar row is only as tall as its bars
   (the template forces 250px with !important, so this needs it too), and each bar's height
   comes from its --h (design px, set in about.html), so the bars shrink with the page */
.about-page .about-journey .journey-chart-bars{
	min-height: 0 !important;
}

.about-page .about-journey .journey-bar{
	height: calc(var(--h) * var(--u));
}

/* bars grow up from the baseline one after another when the chart scrolls into view
   (js/about-journey.js adds .is-ready, then .is-in; --i = bar number, 160ms apart) */
.about-page .about-journey .journey-chart-panel.is-ready .journey-bar{
	transform: scaleY(0);
	transform-origin: 50% 100%;
}

.about-page .about-journey .journey-chart-panel.is-in .journey-bar{
	transform: scaleY(1);
	transition: transform 1200ms cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 160ms);
}

/* "80+" card: the big number and its spacing shrink with the page too (template: fixed px);
   8vw keeps the template size between 992 and 1199px */
.about-page .about-journey .journey-card-stat{
	margin: calc(18 * var(--u)) 0 calc(14 * var(--u));
}

.about-page .about-journey .journey-card-number{
	font-size: min(calc(112 * var(--u)), 8vw);
	letter-spacing: calc(-8 * var(--u));
}

/* faded "100+" behind the card: sized from the card's own width (cqw), so all of it fits on every screen */
.about-page .about-journey .journey-milestone-card{
	container-type: inline-size;
}

.about-page .about-journey .journey-card-watermark{
	font-size: 38cqw;
	letter-spacing: -0.09em;
}

/* bar colours (were inline hex values) */
.about-page .journey-bar.is-empty{
	background: rgba(var(--color-primary-rgb), 0.12);
}

.about-page .journey-bar.is-blue{
	background: var(--color-accent);
}

.about-page .journey-bar.is-pink{
	background: var(--color-accent-2);
}

/* ---------- Where we operate: gradient office list rising out of the dark photo box
   (the box design comes from "17. Contact page"; 4 offices, 2 x 2 here) ---------- */
.about-page #about-locations .page-contact-box{
	margin-top: calc(80 * var(--u));        /* = how far the list rises out of the box (the 40px below the title comes from .section-row) */
	padding: 0 calc(48 * var(--u)) calc(48 * var(--u));
}

.about-page #about-locations .contact-info-list{
	gap: calc(32 * var(--u));
	padding: calc(40 * var(--u));
	margin: calc(-80 * var(--u)) 0 0;
}

.about-page #about-locations .contact-info-item{
	width: calc((100% - 32 * var(--u)) / 2);   /* 2 per row, 1 gap of 32px (4 offices: Dhaka, Cox's Bazar, USA, UAE) */
}

.about-page #about-locations .contact-info-item:before{
	right: calc(-16 * var(--u));
}

/* the dividing line only between the two offices of a row
   (custom.css hides it on every 3rd office, for its 3-per-row layout: shown again on the left office of each row) */
.about-page #about-locations .contact-info-item:nth-child(2n + 1):before{
	display: block;
}

.about-page #about-locations .contact-info-item:nth-child(2n):before,
.about-page #about-locations .contact-info-item:last-child:before{
	display: none;
}

.about-page #about-locations .contact-info-content h3{
	line-height: 1.35;
}

/* ---------- Call to action above the footer ---------- */
.about-page .about-cta{
	text-align: center;
}

.about-page .about-cta .section-title{
	margin-bottom: 0;
}

.about-page .about-cta .btn-default{
	margin-top: calc(36 * var(--u));
}



/* ---------- Sister concerns (.about-family): the Cubix pill, lines drawn from it to the company cards.
   Plain white background. Each logo panel is a link to the company's website, like its button. Animations only move / fade (transform, opacity, stroke-dashoffset): the drawing runs once
   when WOW adds .animated; then a small light keeps running down the lines (one run every 3s).
   Phones: cubix-responsive.css "18. About page". ---------- */
.about-page .about-family{
	position: relative;
	padding: calc(80 * var(--u)) 0;
	background: var(--color-white);
}

.about-page .about-family .container{
	max-width: var(--container-w);
}

.about-page .about-family .section-row{
	margin-bottom: calc(20 * var(--u));     /* the tree fills the rest of the 40px title -> content space */
}

.about-page .about-family .section-row .section-title{
	max-width: calc(820 * var(--u));
	margin: 0 auto;
	text-align: center;
}

/* the tree: Cubix pill + two lines down to the cards */
.about-page .about-family .family-tree{
	position: relative;
	height: calc(130 * var(--u));
	visibility: visible !important;          /* WOW only marks it .animated: the parts animate themselves */
}

.about-page .about-family .family-hub{
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: calc(14 * var(--u)) calc(28 * var(--u));
	border: 2px solid transparent;
	border-radius: 100px;
	background: linear-gradient(var(--color-primary), var(--color-primary)) padding-box, var(--gradient-brand) border-box;
	box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.18);
	transform: translateX(-50%) scale(0.6);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1), opacity 0.4s ease;
}

.about-page .about-family .family-hub img{
	width: auto;
	height: calc(38 * var(--u));
}

.about-page .about-family .family-lines{
	position: absolute;
	top: calc(40 * var(--u));                /* from the middle of the pill */
	left: calc(-15 * var(--u));              /* 1/4 and 3/4 of this width = the middle of each card (half the gap wider each side) */
	width: calc(100% + 30 * var(--u));
	height: calc(90 * var(--u));
	overflow: visible;
}

.about-page .about-family .family-lines path{
	fill: none;
	stroke: url(#family-grad);
	stroke-width: 2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;       /* even 2px line, however wide the box is */
	stroke-dasharray: 520;                   /* screen px, longer than a line ever is */
	stroke-dashoffset: 520;                  /* hidden: drawn when the part comes into view */
	transition: stroke-dashoffset 0.9s cubic-bezier(.22, 1, .36, 1) 0.25s;
}

/* a short bright piece that keeps running down each line after it is drawn: 1.6s down, then a short rest */
.about-page .about-family .family-lines .family-pulse{
	stroke: var(--color-accent-2);
	stroke-width: 3;
	stroke-dasharray: 14 520;
	stroke-dashoffset: 14;
	opacity: 0;
	transition: none;
}

.about-page .about-family .family-tree.animated .family-hub{
	transform: translateX(-50%) scale(1);
	opacity: 1;
}

.about-page .about-family .family-tree.animated .family-lines path{
	stroke-dashoffset: 0;
}

.about-page .about-family .family-tree.animated .family-lines .family-pulse{
	animation: familyPulse 3s ease-in-out 1.3s infinite;
}

@keyframes familyPulse{
	0%  { stroke-dashoffset: 14;   opacity: 0; }
	8%  { opacity: 1; }
	46% { opacity: 1; }
	54% { stroke-dashoffset: -420; opacity: 0; }    /* down the line in 1.6s ... */
	100%{ stroke-dashoffset: -420; opacity: 0; }    /* ... then a 1.4s rest */
}

/* cards: like the other About cards (thin border, radius 12, light shadow), two side by side.
   WOW fades in the wrapper (.family-item); the card inside keeps its own hover lift */
.about-page .about-family .family-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(30 * var(--u));
}

.about-page .about-family .family-item{
	display: flex;
}

.about-page .about-family .family-item > .family-card{
	flex: 1;
}

.about-page .about-family .family-card{
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
	transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

/* the dot where the line reaches the card */
.about-page .about-family .family-card::before{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: calc(14 * var(--u));
	height: calc(14 * var(--u));
	border-radius: 50%;
	background: var(--gradient-brand);
	box-shadow: 0 0 0 calc(5 * var(--u)) rgba(var(--color-accent-2-rgb), 0.14);
	transform: translate(-50%, -50%);
}

.about-page .about-family .family-card:hover{
	transform: translateY(calc(-6 * var(--u)));
	border-color: rgba(var(--color-accent-2-rgb), 0.35);
	box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(var(--color-primary-rgb), 0.12);
}

/* logo on the site's dark navy (the logos have white parts), a soft brand glow, one light sweep on arrival */
.about-page .about-family .family-logo{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(220 * var(--u));
	padding: calc(30 * var(--u)) calc(44 * var(--u));
	border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
	background:
		radial-gradient(60% 90% at 50% 120%, rgba(var(--color-accent-2-rgb), 0.28), transparent 70%),
		radial-gradient(50% 80% at 0% 0%, rgba(var(--color-accent-rgb), 0.22), transparent 70%),
		var(--color-primary);
	overflow: hidden;
}

.about-page .about-family .family-logo:focus-visible{
	outline: 2px solid var(--color-accent-2);
	outline-offset: -4px;
}

.about-page .about-family .family-logo img{
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.about-page .about-family .family-logo::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 35%;
	background: linear-gradient(100deg, transparent, rgba(var(--color-white-rgb), 0.16), transparent);
	transform: translateX(-120%) skewX(-18deg);
	pointer-events: none;
}

.about-page .about-family .family-item.animated .family-logo::after{
	animation: familySweep 1.1s ease 0.5s both;
}

@keyframes familySweep{
	to{ transform: translateX(320%) skewX(-18deg); }
}

.about-page .about-family .family-body{
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: calc(30 * var(--u));
}

.about-page .about-family .family-name{
	margin: 0 0 calc(14 * var(--u));
	font-family: var(--font-display);
	font-size: calc(32 * var(--u));
	line-height: 1.1;
	color: var(--color-primary);
}

.about-page .about-family .family-name span{
	margin-left: calc(8 * var(--u));
	font-family: var(--font-heading);
	font-size: calc(16 * var(--u));
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-accent-2);
}

.about-page .about-family .family-body p{
	margin: 0 0 calc(26 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

.about-page .about-family .family-body .btn-default{
	align-self: flex-start;
	margin-top: auto;
}

@media (prefers-reduced-motion: reduce){
	.about-page .about-family .family-hub,
	.about-page .about-family .family-lines path{ transition: none; }
	.about-page .about-family .family-lines .family-pulse,
	.about-page .about-family .family-item.animated .family-logo::after{ animation: none; }
}


/* ==========================================================================
   19. Services page
   --------------------------------------------------------------------------
   HTML: services.html <body class="services-page"> (base styles: custom.css)
   Same look as the home page: 80px top / bottom in every section, 40px from the
   title to the content, home section titles (.nm-heading), lead text 18px,
   cards like the home Services cards (radius 12, thin border, very light shadow,
   20px gaps). The old grey sections are now white with the home page's soft
   pink wash at the top of service 01, 03, 05 and Technology we've built.
   (replaces css/services-page.css, which this page no longer loads)
   Sections: .services-core, .service-detail-section (#service-01 … #service-05),
             .services-process-section, .services-products-section, .services-cta
   ========================================================================== */

/* ---------- All sections: same space as the home sections ---------- */
.services-page .services-core,
.services-page .service-detail-section,
.services-page .services-process-section,
.services-page .services-products-section,
.services-page .services-cta{
	position: relative;
	padding: calc(80 * var(--u)) 0;
	background: var(--color-white);
}

/* container scales like the home sections (lines up with the logo and the Book Demo button) */
.services-page .services-core .container,
.services-page .service-detail-section .container,
.services-page .services-process-section .container,
.services-page .services-products-section .container,
.services-page .services-cta .container{
	max-width: var(--container-w);
}

/* title -> content: 40px (custom.css gives 80px) */
.services-page .section-row{
	margin-bottom: calc(40 * var(--u));
}

.services-page .section-row .section-title{
	max-width: calc(720 * var(--u));
}

/* lead text under a title: like the home About text */
.services-page .section-title p{
	margin: calc(20 * var(--u)) 0 0;
	font-size: calc(18 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

/* ---------- Pink wash at the top (like the home Products section): service 01, 03, 05 and Technology we've built;
   the others (Core services, service 02, 04, How we work, call to action) stay plain white ---------- */
.services-page .service-detail-section:not(.service-detail-alt),
.services-page .services-products-section{
	background:
		radial-gradient(100% calc(445 * var(--u)) at 0% 0%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		radial-gradient(100% calc(445 * var(--u)) at 100% 0%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
		var(--color-white);
}

/* ---------- Core services: cards like the home Services cards, 20px gaps ---------- */
.services-page .services-core-grid{
	margin: 0 calc(-10 * var(--u)) calc(-20 * var(--u));   /* bottom: cancels the last row's card margin */
}

.services-page .services-core-grid > *{
	padding: 0 calc(10 * var(--u));
}

.services-page .service-core-card{
	width: 100%;
	height: calc(100% - 20 * var(--u));
	margin-bottom: calc(20 * var(--u));
	padding: calc(30 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
}

/* icon -> title: 40px */
.services-page .service-core-card .icon-box{
	margin-bottom: calc(40 * var(--u));
}

.services-page .service-core-card .icon-box img{
	max-width: calc(80 * var(--u));
}

/* hover / active card: the icon floats up a little while the gradient rises */
.services-page .service-core-card .icon-box{
	transition: transform 0.45s cubic-bezier(.22, 1, .36, 1);
}

.services-page .service-core-card:hover .icon-box{
	transform: translateY(calc(-6 * var(--u)));
}

.services-page .service-core-card .service-title-box{
	margin-bottom: calc(15 * var(--u));
}

.services-page .service-core-card .service-title{
	width: calc(100% - 55 * var(--u));
}

.services-page .service-core-card .service-title h3{
	font-size: calc(20 * var(--u));
	line-height: 1.3;
}

.services-page .service-core-card .service-btn a{
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	margin-left: calc(15 * var(--u));
}

.services-page .service-core-card .service-btn a i{
	font-size: calc(18 * var(--u));
}

/* description: same colour as the home descriptions; white on the coloured (active / hovered) card */
.services-page .service-core-card .service-content p{
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

.services-page .service-core-card.active .service-content p,
.services-page .service-core-card:hover .service-content p{
	color: var(--color-white);
}

/* ---------- Service details: text on one side, picture on the other ---------- */
/* 60px between the two columns (the outer edges stay on the container) */
.services-page .service-detail-row{
	margin-right: calc(-30 * var(--u));
	margin-left: calc(-30 * var(--u));
}

.services-page .service-detail-row > *{
	padding-right: calc(30 * var(--u));
	padding-left: calc(30 * var(--u));
}

/* text on the left like the home About text */
.services-page .service-detail-content .section-title{
	margin-bottom: 0;
	text-align: left;
}

/* service list: small pills with a gradient diamond */
.services-page .service-capability-list{
	display: flex;
	flex-wrap: wrap;
	gap: calc(10 * var(--u));
	margin-top: calc(30 * var(--u));
}

.services-page .service-capability-list span{
	position: relative;
	padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: 100px;
	background: var(--color-white);
	color: var(--color-primary);
	font-size: calc(15 * var(--u));
	font-weight: 600;
	line-height: 1.3;
	transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* hover: the pill lifts a little, pink border, and its diamond turns a quarter */
.services-page .service-capability-list span:hover{
	transform: translateY(calc(-2 * var(--u)));
	border-color: rgba(var(--color-accent-2-rgb), 0.35);
	box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(var(--color-primary-rgb), 0.06);
}

.services-page .service-capability-list span::before{
	content: '';
	position: absolute;
	top: 50%;
	left: calc(16 * var(--u));
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	border-radius: calc(2 * var(--u));
	background: var(--gradient-brand);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.services-page .service-capability-list span:hover::before{
	transform: translateY(-50%) rotate(135deg);
}

/* list -> button: the same 10px as between the pill rows, so the button reads as the list's last row */
.services-page .service-detail-content .btn-default{
	margin-top: calc(10 * var(--u));
}

/* service image (images/services/, services 01 – 04): a card like the home cards, the image fills it
   at its own shape (1400 x 939). The image drifts and zooms very slowly so the scene feels alive;
   hovering the card lifts its border and shadow. (No animation with reduced motion: cubix-responsive.css) */
.services-page .service-photo{
	position: relative;
	width: 100%;
	aspect-ratio: 1400 / 939;
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-light);
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s cubic-bezier(.22, 1, .36, 1);
}

.services-page .service-photo:hover{
	border-color: rgba(var(--color-accent-2-rgb), 0.35);
	box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(var(--color-primary-rgb), 0.1);
}

/* the picture + its animated layer drift together, so the moving parts stay on the picture's details */
.services-page .service-photo-scene{
	position: absolute;
	inset: 0;
	transform: scale(1.04);
	animation: services-photo-drift 16s ease-in-out infinite alternate;
	will-change: transform;
}

.services-page .service-photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* each picture starts at a different point, so they never move in step */
.services-page #service-02 .service-photo-scene{ animation-delay: -4s; }
.services-page #service-03 .service-photo-scene{ animation-delay: -8s; }
.services-page #service-04 .service-photo-scene{ animation-delay: -12s; }

@keyframes services-photo-drift{
	0%   { transform: scale(1.04) translate(0, 0); }
	100% { transform: scale(1.08) translate(-1.2%, -1%); }
}

/* ---------- Moving parts inside each picture (inline SVG in services.html, drawn in the picture's
   own 2000 x 1341 space): data dots travelling along the cables, pulse rings, glows, blinking lights,
   a light sweep over the security dome. js/services-photos.js pauses them while off screen. ---------- */
.services-page .service-photo-fx{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.services-page .service-photo-fx .fx-blue{ fill: var(--color-accent); }
.services-page .service-photo-fx .fx-pink{ fill: var(--color-accent-2); }

/* data dot: white core inside a soft coloured halo */
.services-page .service-photo-fx .fx-halo{ opacity: 0.35; }
.services-page .service-photo-fx .fx-core{ fill: var(--color-white); }
.services-page .service-photo-fx .fx-packet{
	filter: drop-shadow(0 0 6px rgba(var(--color-accent-2-rgb), 0.55));
}

.services-page .service-photo-fx .fx-packet.fx-blue{
	filter: drop-shadow(0 0 6px rgba(var(--color-accent-rgb), 0.7));
}

/* pulse rings */
.services-page .service-photo-fx .fx-ring{
	fill: none;
	stroke-width: 4;
}

.services-page .service-photo-fx .fx-ring-blue{ stroke: var(--color-accent); }
.services-page .service-photo-fx .fx-ring-pink{ stroke: var(--color-accent-2); }

/* soft glows and blinking lights */
.services-page .service-photo-fx .fx-glow{ filter: blur(14px); }
.services-page .service-photo-fx .fx-led{ filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), 0.9)); }
.services-page .service-photo-fx .fx-led.fx-pink{ filter: drop-shadow(0 0 5px rgba(var(--color-accent-2-rgb), 0.9)); }

/* the cloud "breathing" (03) */
.services-page .service-photo-fx .fx-cloud{
	fill: var(--color-accent-2);
	filter: blur(40px);
}

/* the light sweeping over the security dome (04) */
.services-page .service-photo-fx .fx-shine{ fill: url(#fx4-shine); }
.services-page .service-photo-fx .fx-stop-clear{ stop-color: var(--color-white); stop-opacity: 0; }
.services-page .service-photo-fx .fx-stop-white{ stop-color: var(--color-white); stop-opacity: 0.45; }

/* 05 Consultancy & support: 2 x 2 cards like the home Services cards (gradient rises on hover), 20px gaps */
.services-page .support-feature-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(20 * var(--u));
}

.services-page .support-feature{
	position: relative;
	isolation: isolate;
	padding: calc(30 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(var(--color-primary-rgb), 0.05);
	overflow: hidden;
}

.services-page .support-feature::before{
	content: '';
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0;
	background: var(--gradient-brand);
	transition: height 0.4s ease-in-out;
}

.services-page .support-feature:hover::before,
.services-page .support-feature:focus-within::before{
	height: 100%;
}

.services-page .support-feature > *{
	position: relative;
	z-index: 1;
}

.services-page .support-feature .icon-box{
	display: grid;
	place-items: center;
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	margin-bottom: calc(24 * var(--u));
	border-radius: calc(12 * var(--u));
	background: var(--gradient-brand);
	transition: background 0.4s ease-in-out, transform 0.45s cubic-bezier(.22, 1, .36, 1);
}

/* hover: the icon box turns see-through on the gradient and floats up a little */
.services-page .support-feature:hover .icon-box,
.services-page .support-feature:focus-within .icon-box{
	background: rgba(var(--color-white-rgb), 0.2);
	transform: translateY(calc(-4 * var(--u)));
}

.services-page .support-feature .icon-box img{
	width: calc(28 * var(--u));
	max-height: calc(28 * var(--u));
	filter: brightness(0) invert(1);
}

.services-page .support-feature h3{
	margin: 0;
	color: var(--color-primary);
	font-size: calc(20 * var(--u));
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.4s ease-in-out;
}

.services-page .support-feature:hover h3,
.services-page .support-feature:focus-within h3{
	color: var(--color-white);
}

/* ---------- How we work: 4 steps on a gradient line, 20px gaps ---------- */
.services-page .services-process-grid{
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(20 * var(--u));
}

/* the line through the middle of the numbers: from the centre of the first circle to the centre of the last
   (each circle is centred in its column; a column is (100% - 3 gaps of 20px) / 4, so its centre is half of that) */
.services-page .services-process-grid::before{
	content: '';
	position: absolute;
	top: calc(22 * var(--u) - 1px);
	right: calc((100% - 60 * var(--u)) / 8);
	left: calc((100% - 60 * var(--u)) / 8);
	height: 2px;
	background: var(--gradient-brand);
	opacity: 0.5;
	transform-origin: left center;
}

/* each step centred under its number */
.services-page .process-step{
	position: relative;
	z-index: 1;
	text-align: center;
}

/* scroll animation (js/services-process.js adds .is-ready, then .is-in when the steps scroll into view):
   the line draws from left to right and each step rises in as the line reaches its circle.
   --i = step number (0-3); --process-step = time between steps (the line takes 3 of them) */
.services-page .services-process-grid{
	--process-step: 600ms;
}

.services-page .services-process-grid.is-ready::before{
	transform: scaleX(0);
}

.services-page .services-process-grid.is-in::before{
	transform: scaleX(1);
	transition: transform calc(3 * var(--process-step)) linear;
}

.services-page .services-process-grid.is-ready .process-step{
	opacity: 0;
	transform: translateY(calc(20 * var(--u)));
}

.services-page .services-process-grid.is-in .process-step{
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease calc(var(--i, 0) * var(--process-step)),
		transform 0.6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * var(--process-step));
}

/* the number circle pops when the line arrives */
.services-page .services-process-grid.is-ready .process-step > span{
	transform: scale(0.6);
}

.services-page .services-process-grid.is-in .process-step > span{
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * var(--process-step));
}

/* step number: the home icon circle (44px, 2px gradient border, pale blue halo) */
.services-page .process-step > span{
	display: grid;
	place-items: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	margin: 0 auto calc(20 * var(--u));
	border: 2px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(var(--color-white), var(--color-white)) padding-box,
		var(--gradient-brand) border-box;
	box-shadow: 0 0 0 calc(4 * var(--u)) rgba(var(--color-accent-rgb), 0.15);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: calc(15 * var(--u));
	font-weight: 700;
}

.services-page .process-step h3{
	margin-bottom: calc(10 * var(--u));
	color: var(--color-primary);
	font-size: calc(20 * var(--u));
	font-weight: 600;
	letter-spacing: 0.05em;
}

.services-page .process-step p{
	max-width: calc(280 * var(--u));
	margin: 0 auto;
	font-size: calc(16 * var(--u));
	line-height: 1.7;
	color: rgba(var(--color-primary-rgb), 0.7);
}

/* ---------- Technology we've built: centred title + button, then a full-width product ticker
   like the home Clients slider (js/services-products.js: Swiper, endless, stops on mouse over) ---------- */
.services-page .services-products-section{
	overflow: hidden;
}

.services-page .services-products-section .section-row > *{
	text-align: center;
}

.services-page .services-products-section .section-row .section-title{
	margin-bottom: 0;
}

/* text -> button: 36px, like the home button rows */
.services-page .services-products-section .section-row .btn-default{
	margin-top: calc(36 * var(--u));
}

/* soft fade on the left and right edges (= the home Clients slider) */
.services-page .services-products-slider{
	-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
}

/* steady, even speed (no ease in / out between cards) */
.services-page .services-products-slider .swiper-wrapper{
	transition-timing-function: linear !important;   /* Swiper sets its own timing inline */
}

/* one slide = card + the 20px gap around it */
.services-page .services-product{
	width: calc(260 * var(--u));
	padding: 0 calc(10 * var(--u));
}

/* card: like the home Clients cards, with the product icon, name and what it is for */
.services-page .services-product-card{
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	width: 100%;
	padding: calc(16 * var(--u)) calc(18 * var(--u));    /* height follows the content: 16px above and below the icon */
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	color: var(--color-primary);
	transition: border-color 0.3s ease;
}

/* the hovered card and the card in the middle (js/services-products.js) get the blue border */
.services-page .services-product-card:hover,
.services-page .services-product.is-center .services-product-card{
	border-color: rgba(var(--color-accent-rgb), 0.65);    /* = the home Clients cards */
	color: var(--color-primary);
}

/* hover: the product icon grows a touch (the card itself stays put inside the slider) */
.services-page .services-product-card img{
	transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.services-page .services-product-card:hover img{
	transform: scale(1.08);
}

.services-page .services-product-card img{
	flex: none;
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
	object-fit: contain;
}

.services-page .services-product-card b{
	display: block;
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1.3;
}

.services-page .services-product-card small{
	display: block;
	margin-top: calc(4 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: 1.3;
	color: rgba(var(--color-primary-rgb), 0.65);
}

/* client ticker under the products: moves the other way (js/services-products.js), cards like the home Clients cards */
.services-page .services-clients-slider{
	margin-top: calc(20 * var(--u));
	-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
}

.services-page .services-clients-slider .swiper-wrapper{
	transition-timing-function: linear !important;   /* Swiper sets its own timing inline */
}

.services-page .services-client{
	width: calc(240 * var(--u));
	padding: 0 calc(10 * var(--u));
}

.services-page .services-client-card{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(110 * var(--u));
	margin: 0;
	padding: calc(16 * var(--u)) calc(20 * var(--u));
	border: 1px solid rgba(var(--color-primary-rgb), 0.14);
	border-radius: calc(12 * var(--u));
	background: var(--color-white);
	transition: border-color 0.3s ease;
}

.services-page .services-client-card:hover,
.services-page .services-client.is-center .services-client-card{
	border-color: rgba(var(--color-accent-rgb), 0.65);
}

/* logo: grey, full colour when hovered or in the middle */
.services-page .services-client-card img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(100%) brightness(0.8) contrast(1.15);
	transition: filter 0.3s ease;
}

.services-page .services-client-card:hover img,
.services-page .services-client.is-center .services-client-card img{
	filter: grayscale(0);
}

/* ---------- Call to action above the footer: like the About page's closing section ---------- */
.services-page .services-cta{
	text-align: center;
}

.services-page .services-cta .section-title{
	margin-bottom: 0;
}

.services-page .services-cta .section-title p{
	max-width: calc(720 * var(--u));
	margin-right: auto;
	margin-left: auto;
}

.services-page .services-cta .btn-default{
	margin-top: calc(36 * var(--u));
}


/* ==========================================================================
   20. Full-screen menu (all pages)
   --------------------------------------------------------------------------
   HTML: <button class="cx-menu-trigger"> in the header (replaces the old
   "Pages" dropdown) + <nav class="cx-menu" id="cxMenu"> before the scripts
   at the end of <body>.   JS: js/function.js "Full-screen menu".
   Same items as the header menu; Services and Products list what those
   pages show, plus a "More" section for the other pages.
   The header hamburger (tablet / mobile) opens this menu too.
   Tablet / mobile: cubix-responsive.css "20. Full-screen menu".
   ========================================================================== */

.cx-menu-trigger,
.cx-menu{
	--cx-blue     : var(--color-accent);
	--cx-pink     : var(--color-accent-2);
	--cx-navy     : var(--color-primary);
	--cx-gradient : var(--gradient-brand);
}

/* ---------- "Pages" button in the header: same size / colour as the other menu links ---------- */
.main-header .cx-menu-trigger{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--u));
	padding: calc(14 * var(--u)) calc(20 * var(--u));
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-menu);
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: inherit;
	color: rgba(var(--color-white-rgb), 0.85);
	transition: color 0.3s ease;
}

.main-header .cx-menu-trigger:hover,
.main-header .cx-menu-trigger:focus-visible,
.main-header .cx-menu-trigger[aria-expanded="true"]{
	color: var(--color-white);
}

/* ---------- Overlay ---------- */
.cx-menu{
	position: fixed;
	inset: 0;
	z-index: 9999;                         /* above the header (999), below the preloader */
	display: grid;
	grid-template-rows: auto 1fr;
	padding: calc(36 * var(--u)) 8% calc(48 * var(--u));
	background:
		radial-gradient(circle at 85% 15%, rgba(var(--color-accent-2-rgb), 0.22), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(var(--color-accent-rgb), 0.2), transparent 45%),
		var(--cx-navy);
	color: var(--color-white);
	font-family: var(--font-body);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cx-menu.is-open{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s;   /* visible at once on open, so Close can take the focus */
}

body.cx-menu-lock{
	overflow: hidden;
}

.cx-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Top bar: Close + logo ---------- */
.cx-menu__top{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-bottom: calc(56 * var(--u));
}

.cx-menu__close{
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: calc(22 * var(--u));
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cx-menu__close span{
	font-size: calc(30 * var(--u));
	line-height: 1;
	transition: transform 0.3s ease;
}

.cx-menu__close:hover span{
	transform: rotate(90deg);
}

/* focus ring only for keyboard users (the menu moves the focus to Close when it opens) */
.cx-menu__close:focus{
	outline: none;
}

.cx-menu__close:focus-visible{
	outline: 2px solid var(--cx-pink);
	outline-offset: 6px;
	border-radius: 4px;
}

.cx-menu__logo{
	justify-self: center;
}

.cx-menu__logo img{
	display: block;
	height: calc(46 * var(--u));
	width: auto;
}

/* ---------- 3 columns: menu items | pages of the chosen section | contact ---------- */
.cx-menu__body{
	display: grid;
	grid-template-columns: 1fr 1.6fr 0.9fr;
	gap: calc(48 * var(--u));
	align-items: start;
}

/* Column 1: the menu items (fade up one after another when the menu opens) */
.cx-menu__main > li{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.cx-menu.is-open .cx-menu__main > li{
	opacity: 1;
	transform: none;
}

.cx-menu.is-open .cx-menu__main > li:nth-child(1){ transition-delay: 0.08s; }
.cx-menu.is-open .cx-menu__main > li:nth-child(2){ transition-delay: 0.12s; }
.cx-menu.is-open .cx-menu__main > li:nth-child(3){ transition-delay: 0.16s; }
.cx-menu.is-open .cx-menu__main > li:nth-child(4){ transition-delay: 0.20s; }
.cx-menu.is-open .cx-menu__main > li:nth-child(5){ transition-delay: 0.24s; }
.cx-menu.is-open .cx-menu__main > li:nth-child(6){ transition-delay: 0.28s; }

.cx-menu__link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: calc(8 * var(--u)) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: rgba(var(--color-white-rgb), 0.78);
	font-family: var(--font-heading);
	font-size: calc(26 * var(--u));
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.cx-menu__link:hover,
.cx-menu__link:focus-visible,
.cx-menu__link.is-active{
	color: var(--color-white);
	padding-left: calc(10 * var(--u));
}

/* brand-gradient text: the open section (is-active, set by js/function.js), and on hover any
   plain link (Home, About Us, Contact Us), so every item looks the same under the mouse */
.cx-menu__link.is-active,
a.cx-menu__link:hover,
a.cx-menu__link:focus-visible{
	background: var(--cx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cx-menu__more{
	display: inline-flex;
	gap: 4px;
	padding-left: calc(16 * var(--u));
}

.cx-menu__more i{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(var(--color-white-rgb), 0.55);
	transition: background 0.25s ease;
}

.cx-menu__link.is-active .cx-menu__more i,
.cx-menu__link:hover .cx-menu__more i{
	background: var(--cx-pink);
}

/* Only one item highlighted at a time: while the mouse is on any item, the open section
   (is-active) goes back to the plain look unless it is the one under the mouse. When the
   mouse leaves the list (e.g. into the pages column), the open section lights up again. */
.cx-menu__main:has(.cx-menu__link:hover) .cx-menu__link.is-active:not(:hover){
	background: none;
	color: rgba(var(--color-white-rgb), 0.78);
	padding-left: 0;
}

.cx-menu__main:has(.cx-menu__link:hover) .cx-menu__link.is-active:not(:hover) .cx-menu__more i{
	background: rgba(var(--color-white-rgb), 0.55);
}

/* Column 2: the pages of the section under the mouse */
.cx-menu__panel{
	min-height: calc(320 * var(--u));
}

.cx-menu__sub{
	display: none;
}

.cx-menu__sub.is-visible{
	display: block;
}

.cx-menu__sub h3{
	display: inline-block;
	margin-bottom: calc(18 * var(--u));
	font-family: var(--font-heading);
	font-size: calc(24 * var(--u));
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--cx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cx-menu__sub ul{
	max-width: calc(320 * var(--u));
}

/* Products: the 3 groups of the Products page side by side */
.cx-menu__groups{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(32 * var(--u));
}

.cx-menu__groups ul{
	max-width: none;
}

.cx-menu__group-title{
	margin: 0 0 calc(4 * var(--u));
	font-size: calc(13 * var(--u));
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(var(--color-white-rgb), 0.5);
}

.cx-menu__sub li{
	opacity: 0;
	transform: translateX(-12px);
	animation: cxSlide 0.35s forwards;
}

.cx-menu__sub li:nth-child(2){ animation-delay: 0.05s; }
.cx-menu__sub li:nth-child(3){ animation-delay: 0.10s; }
.cx-menu__sub li:nth-child(4){ animation-delay: 0.15s; }
.cx-menu__sub li:nth-child(5){ animation-delay: 0.20s; }
.cx-menu__sub li:nth-child(n + 6){ animation-delay: 0.25s; }

@keyframes cxSlide{
	to{
		opacity: 1;
		transform: none;
	}
}

.cx-menu__sub a{
	position: relative;
	display: block;
	padding: calc(12 * var(--u)) 0;
	color: rgba(var(--color-white-rgb), 0.85);
	font-size: calc(16 * var(--u));
	border-bottom: 1px solid rgba(var(--color-white-rgb), 0.14);
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.cx-menu__sub a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--cx-gradient);
	transition: width 0.35s ease;
}

.cx-menu__sub a:hover,
.cx-menu__sub a:focus-visible{
	color: var(--color-white);
	padding-left: calc(8 * var(--u));
}

.cx-menu__sub a:hover::after,
.cx-menu__sub a:focus-visible::after{
	width: 100%;
}

.cx-menu__hint{
	margin: 0;
	padding-top: calc(14 * var(--u));
	font-size: calc(14 * var(--u));
	color: rgba(var(--color-white-rgb), 0.35);
}

/* Column 3: contact */
.cx-menu__contact{
	text-align: right;
}

.cx-menu__contact h4{
	margin: calc(22 * var(--u)) 0 0;
	font-family: var(--font-heading);
	font-size: calc(20 * var(--u));
	font-weight: 400;
	letter-spacing: 0.5px;
	color: rgba(var(--color-white-rgb), 0.6);
}

.cx-menu__contact h4:first-child{
	margin-top: 0;
}

.cx-menu__contact p,
.cx-menu__contact > a:not(.btn-default){
	display: block;
	margin: 0;
	font-size: calc(14.5 * var(--u));
	line-height: 1.7;
	color: var(--color-white);
}

.cx-menu__contact > a:not(.btn-default):hover{
	color: var(--cx-pink);
}

.cx-menu__social{
	display: flex;
	justify-content: flex-end;
	gap: calc(10 * var(--u));
	margin-top: calc(26 * var(--u));
}

.cx-menu__social a{
	display: grid;
	place-items: center;
	width: calc(38 * var(--u));
	height: calc(38 * var(--u));
	border-radius: 50%;
	border: 1px solid rgba(var(--color-white-rgb), 0.25);
	font-size: calc(14 * var(--u));
	color: var(--color-white);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.cx-menu__social a:hover{
	background: var(--cx-gradient);
	border-color: transparent;
}

/* Book Demo: the site button as is (01. Global > Button) */
.cx-menu__contact .btn-default{
	margin-top: calc(26 * var(--u));
}

/* copies of the sections' pages, used on tablet / mobile: hidden on desktop */
.cx-menu__mobile-sub{
	display: none;
}

/* ---------- Split layout (.cx-menu--split; every page) ----------
   Left: dark panel with the menu items. Right: the inner-page header photo
   under a navy wash, with the logo, the section's pages and the contact details.
   .cx-menu__top / .cx-menu__body step aside (display: contents) so their
   children sit straight in the 3-column grid: [left panel][pages][contact]. */
.cx-menu--split{
	--cx-split: 34%;
	grid-template-columns: var(--cx-split) 1fr 0.8fr;
	grid-template-rows: auto 1fr;
	padding: 0;
	background:
		linear-gradient(var(--cx-navy), var(--cx-navy)) left top / var(--cx-split) 100% no-repeat,
		radial-gradient(circle at 92% 8%, rgba(var(--color-accent-2-rgb), 0.3), transparent 40%),
		radial-gradient(circle at 40% 100%, rgba(var(--color-accent-rgb), 0.22), transparent 45%),
		linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.1) 0%, rgba(var(--color-accent-2-rgb), 0.12) 100%),
		var(--cx-navy);
}

/* Brand watermark: the Cubix mark, big and faint, in the middle of the right side,
   with a soft brand-colour glow behind it. It floats slowly while the menu is open.
   The mark = the left 135 x 138px of the header logo (500 x 138), like the preloader.
   position: fixed (not absolute): the menu scrolls (overflow-y: auto), and an absolute
   glow that grows while it floats made the menu's scrollbar flash on and off. Fixed
   decorations don't count as menu content; the menu fills the screen, so they sit in
   the same place. */
.cx-menu--split::before,
.cx-menu--split::after{
	content: "";
	position: fixed;
	top: 50%;
	left: calc(var(--cx-split) + (100% - var(--cx-split)) / 2);
	z-index: -1;                           /* above the background, under the menu content */
	pointer-events: none;
}

.cx-menu--split::before{
	width: calc(900 * var(--u));
	height: calc(900 * var(--u));
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--color-accent-2-rgb), 0.28) 0%, rgba(var(--color-accent-rgb), 0.14) 40%, transparent 70%);
	transform: translate(-50%, -50%);
}

.cx-menu--split::after{
	height: calc(620 * var(--u));
	aspect-ratio: 135 / 138;
	background: url("../images/logo/logo-light.png") no-repeat left center / auto 100%;
	opacity: 0.1;
	transform: translate(-50%, -50%);
}

.cx-menu--split.is-open::after{
	animation: cxMarkFloat 9s ease-in-out infinite;
}

.cx-menu--split.is-open::before{
	animation: cxGlowPulse 9s ease-in-out infinite;
}

@keyframes cxMarkFloat{
	0%, 100%{ transform: translate(-50%, -50%) rotate(0deg); }
	50%     { transform: translate(-50%, -53%) rotate(4deg); }
}

@keyframes cxGlowPulse{
	0%, 100%{ opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
	50%     { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.cx-menu--split .cx-menu__top,
.cx-menu--split .cx-menu__body{
	display: contents;
}

.cx-menu--split .cx-menu__top > span:last-child{
	display: none;
}

/* Close: top of the left panel */
.cx-menu--split .cx-menu__close{
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	margin: calc(56 * var(--u)) 0 calc(48 * var(--u)) calc(120 * var(--u));
	font-size: calc(30 * var(--u));
}

.cx-menu--split .cx-menu__close span{
	font-size: calc(38 * var(--u));
}

/* Logo: centred over the photo side */
.cx-menu--split .cx-menu__logo{
	grid-column: 2 / 4;
	grid-row: 1;
	justify-self: center;
	align-self: center;
}

.cx-menu--split .cx-menu__logo img{
	height: calc(60 * var(--u));
}

/* Left panel: the menu items, bigger and spaced out; the dots on the panel's right edge */
.cx-menu--split .cx-menu__main{
	grid-column: 1;
	grid-row: 2;
	padding: 0 calc(60 * var(--u)) calc(60 * var(--u)) calc(120 * var(--u));
}

.cx-menu--split .cx-menu__link{
	padding: calc(12 * var(--u)) 0;
	font-size: calc(32 * var(--u));
}

.cx-menu--split .cx-menu__more{
	gap: 5px;
}

.cx-menu--split .cx-menu__more i{
	width: 6px;
	height: 6px;
}

/* Middle: the pages of the chosen section */
.cx-menu--split .cx-menu__panel{
	grid-column: 2;
	grid-row: 2;
	min-height: 0;
	padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u)) calc(100 * var(--u));
}

.cx-menu--split .cx-menu__sub h3{
	margin-bottom: calc(24 * var(--u));
	font-size: calc(32 * var(--u));
}

.cx-menu--split .cx-menu__sub ul{
	max-width: calc(460 * var(--u));
}

.cx-menu--split .cx-menu__sub a{
	padding: calc(16 * var(--u)) 0;
	font-family: var(--font-heading);
	font-size: calc(22 * var(--u));
	letter-spacing: 0.3px;
	color: var(--color-white);
	border-bottom: 2px solid rgba(var(--color-white-rgb), 0.55);
}

.cx-menu--split .cx-menu__sub a::after{
	bottom: -2px;
}

/* Products: 3 groups side by side, a little smaller so long names fit */
.cx-menu--split .cx-menu__groups{
	gap: calc(28 * var(--u));
}

.cx-menu--split .cx-menu__groups a{
	font-size: calc(19 * var(--u));
	padding: calc(13 * var(--u)) 0;
}

.cx-menu--split .cx-menu__group-title{
	margin-bottom: calc(6 * var(--u));
	font-size: calc(14 * var(--u));
	color: rgba(var(--color-white-rgb), 0.65);
}

/* Right: contact, bigger; phone and email underlined */
.cx-menu--split .cx-menu__contact{
	grid-column: 3;
	grid-row: 2;
	padding: calc(14 * var(--u)) calc(50 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u));
}

.cx-menu--split .cx-menu__contact h4{
	margin-top: calc(22 * var(--u));
	font-family: var(--font-heading);
	font-size: calc(28 * var(--u));
	font-weight: 500;
	letter-spacing: 0.5px;
	color: rgba(var(--color-white-rgb), 0.85);
}

.cx-menu--split .cx-menu__contact h4:first-child{
	margin-top: 0;
}

.cx-menu--split .cx-menu__contact p,
.cx-menu--split .cx-menu__contact > a:not(.btn-default){
	margin-top: calc(5 * var(--u));
	font-size: calc(19.5 * var(--u));
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-white);
}

.cx-menu--split .cx-menu__contact > a:not(.btn-default){
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: calc(5 * var(--u)) 0 0 auto;
	font-size: calc(20 * var(--u));
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-align: right;
}

.cx-menu--split .cx-menu__contact > br{
	display: none;
}

.cx-menu--split .cx-menu__social{
	margin-top: calc(24 * var(--u));
	gap: calc(12 * var(--u));
}

.cx-menu--split .cx-menu__social a{
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	font-size: calc(18 * var(--u));
}

.cx-menu--split .cx-menu__contact .btn-default{
	margin-top: calc(24 * var(--u));
}

/* ---------- "Pages" as a plain header link (.cx-menu-trigger--plain; every page) ----------
   No dots; same line height and gradient underline as the other menu links */
.main-header .cx-menu-trigger--plain{
	line-height: 1.2em;
}

.main-header .cx-menu-trigger--plain::before{
	content: '';
	position: absolute;
	left: calc(20 * var(--u));
	right: calc(20 * var(--u));
	bottom: calc(10 * var(--u));
	height: 2px;
	border-radius: 2px;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.main-header .cx-menu-trigger--plain:hover::before,
.main-header .cx-menu-trigger--plain:focus-visible::before,
.main-header .cx-menu-trigger--plain[aria-expanded="true"]::before{
	transform: scaleX(1);
}

/* hamburger icon after "Pages": 3 brand-gradient lines; the short middle one grows on hover */
.cx-menu-trigger .cx-burger{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: calc(4 * var(--u));
	width: calc(18 * var(--u));
}

.cx-menu-trigger .cx-burger i{
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--cx-gradient);
	transition: width 0.3s ease;
}

.cx-menu-trigger .cx-burger i:nth-child(2){
	width: 65%;
}

.cx-menu-trigger:hover .cx-burger i:nth-child(2),
.cx-menu-trigger:focus-visible .cx-burger i:nth-child(2){
	width: 100%;
}

/* ---------- Menu button left of the logo (.cx-menu-trigger--icon; every page) ----------
   Only the 3 lines, no "Pages" text, pinned to the left edge of the screen.
   992–1199px: sits next to the logo instead; hidden below 992px (the header
   hamburger opens the same menu there). */
.main-header .cx-menu-trigger--icon{
	position: absolute;
	top: 50%;
	left: calc(40 * var(--u));
	transform: translateY(-50%);
	padding: calc(10 * var(--u));
}

.main-header .cx-menu-trigger--icon .cx-burger{
	align-items: flex-start;
	gap: calc(6 * var(--u));
	width: calc(28 * var(--u));
}


/* ==========================================================================
   21. FAQ page
   ========================================================================== */

/* links inside an open answer: white and underlined, readable on the gradient */
.page-faqs .faq-accordion .accordion-body a{
	color: var(--color-white);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}