/* ==========================================================================
   Cubix Responsive — all media-query (tablet / mobile) rules
   --------------------------------------------------------------------------
   Loaded on every page, after cubix-style.css. Full rules: README.md

   RULES
   - Every responsive rule of the site lives in this file only.
   - Same section order as cubix-style.css; one block per section.
   - Same color / font rules: only the tokens from cubix-style.css "01. Global".
   - Breakpoints (use these, nothing else):
         1199.98px  small laptop      (992px – 1199px)
          991.98px  tablet & mobile   (menu becomes the mobile menu)
          767.98px  mobile
          575.98px  small mobile

   Contents
   01. Global   (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
   ========================================================================== */


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

/* (scaling for 1200px – 1919px is set in cubix-style.css "01. Global") */

/* ---------- Button: small laptop & tablet ---------- */
@media (max-width: 1199.98px){

	.btn-default,
	.btn-default.btn-highlighted{
		font-size: 16px;
		padding: 14px 50px 14px 22px;
	}

	.btn-default::before,
	.btn-default.btn-highlighted::before{
		font-size: 18px;
		transform: translate(-22px, -50%);
	}

	.btn-default:hover::before,
	.btn-default.btn-highlighted:hover::before{
		transform: translate(-19px, -50%);
	}
}

/* ---------- Button: mobile ---------- */
@media (max-width: 767.98px){

	.btn-default,
	.btn-default.btn-highlighted{
		font-size: 15px;
		padding: 13px 46px 13px 20px;
	}

	.btn-default::before,
	.btn-default.btn-highlighted::before{
		font-size: 17px;
		transform: translate(-20px, -50%);
	}

	.btn-default:hover::before,
	.btn-default.btn-highlighted:hover::before{
		transform: translate(-17px, -50%);
	}
}


/* ---------- Touch screens (phones, tablets): no custom mouse cursor (js/magiccursor.js, css/mousecursor.css).
   A tap is also sent as a mouse move, so the cursor's small gradient dot jumped to the tapped spot and
   stayed there. Screens with a mouse keep it ---------- */
@media (hover: none), (pointer: coarse){

	.cb-cursor{
		display: none !important;
	}
}


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

/* ---------- Small laptop (992px – 1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){

	.main-header .navbar-brand img{
		max-width: 140px;
	}

	.main-header .main-menu .nav-menu-wrapper{
		margin: 0 10px;
	}

	.main-header .main-menu ul li a{
		font-size: 15px;
		padding: 12px 10px !important;
	}

	.main-header .main-menu .nav-menu-wrapper > ul > li > a::before{
		left: 10px;
		right: 10px;
	}
}

/* ---------- Tablet & mobile (below 992px) ---------- */
@media (max-width: 991.98px){

	.main-header .navbar,
	.main-header.is-scrolled .navbar{
		padding: 14px 0;
	}

	.main-header .navbar-brand img,
	.main-header.is-scrolled .navbar-brand img{
		max-width: 130px;
	}

	/* Logo | Book Demo | menu button in one row */
	.main-header .header-btn-mobile{
		display: block;
		margin-left: auto;
		margin-right: 12px;
	}

	.main-header .header-btn-mobile .btn-default{
		font-size: 14px;
		padding: 11px 40px 11px 16px;
	}

	.main-header .header-btn-mobile .btn-default::before{
		font-size: 15px;
		transform: translate(-16px, -50%);
	}

	.main-header .header-btn-mobile .btn-default:hover::before{
		transform: translate(-13px, -50%);
	}

	/* Menu button */
	.main-header .slicknav_btn{
		width: 42px;
		height: 42px;
		border-radius: 10px;
	}

	/* Menu panel */
	.main-header .slicknav_menu{
		background: rgba(var(--color-black-rgb), 0.97);
		border-top: 1px solid rgba(var(--color-white-rgb), 0.08);
		box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.5);
	}

	.main-header .slicknav_menu > .slicknav_nav{
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		margin: 0;
		padding: 8px 0;
	}

	.main-header .slicknav_nav .slicknav_row,
	.main-header .slicknav_nav li a{
		font-size: 16px;
		padding: 14px 20px;
		color: rgba(var(--color-white-rgb), 0.85);
		border-bottom: 1px solid rgba(var(--color-white-rgb), 0.06);
	}

	/* Parent row already has the padding: reset the link inside it */
	.main-header .slicknav_nav .slicknav_row a{
		padding: 0;
		border-bottom: 0;
	}

	.main-header .slicknav_nav a:hover,
	.main-header .slicknav_nav a:focus,
	.main-header .slicknav_nav a.is-active,
	.main-header .slicknav_nav .slicknav_row:hover,
	.main-header .slicknav_nav .slicknav_open > .slicknav_row,
	.main-header .slicknav_nav .slicknav_open > .slicknav_row a{
		color: var(--color-accent-2);
		background-color: transparent;
	}

	.main-header .slicknav_open > a .slicknav_arrow:after{
		color: var(--color-accent-2);
	}

	/* Sub menu */
	.main-header .slicknav_menu ul ul{
		background: rgba(var(--color-white-rgb), 0.03);
	}

	.main-header .slicknav_menu ul ul li a{
		font-size: 15px;
		padding: 12px 20px 12px 34px;
		color: rgba(var(--color-white-rgb), 0.7);
	}

	/* The menu panel in the brand gradient, white text; open / hover rows get a light white tint */
	.main-header .slicknav_menu{
		background: var(--gradient-brand);
		border-top-color: rgba(var(--color-white-rgb), 0.2);
		box-shadow: 0 20px 40px rgba(var(--color-primary-rgb), 0.45);
	}

	.main-header .slicknav_nav .slicknav_row,
	.main-header .slicknav_nav li a,
	.main-header .slicknav_menu ul ul li a{
		color: var(--color-white);
		border-bottom-color: rgba(var(--color-white-rgb), 0.18);
	}

	.main-header .slicknav_nav .slicknav_row a{
		border-bottom: 0;
	}

	.main-header .slicknav_nav a:hover,
	.main-header .slicknav_nav a:focus,
	.main-header .slicknav_nav a.is-active,
	.main-header .slicknav_nav .slicknav_row:hover,
	.main-header .slicknav_nav .slicknav_open > .slicknav_row,
	.main-header .slicknav_nav .slicknav_open > .slicknav_row a{
		color: var(--color-white);
		background-color: rgba(var(--color-white-rgb), 0.15);
	}

	/* a link inside a parent row (e.g. "Home", "Pages"): never its own tinted box, only the whole row is tinted */
	.main-header .slicknav_menu .slicknav_nav .slicknav_row a,
	.main-header .slicknav_menu .slicknav_nav .slicknav_row a:hover,
	.main-header .slicknav_menu .slicknav_nav .slicknav_row a:focus,
	.main-header .slicknav_menu .slicknav_nav .slicknav_row a.is-active,
	.main-header .slicknav_menu .slicknav_nav .slicknav_open > .slicknav_row a{
		background-color: transparent;   /* stronger than the tint rule above, which also matched these links */
	}

	.main-header .slicknav_open > a .slicknav_arrow:after,
	.main-header .slicknav_nav .slicknav_arrow,
	.main-header .slicknav_nav .slicknav_arrow:after{
		color: var(--color-white);
	}

	/* sub menu: a slightly darker layer so it reads as "inside" */
	.main-header .slicknav_menu ul ul{
		background: rgba(var(--color-primary-rgb), 0.18);
	}
}

/* ---------- Small mobile (below 576px) ---------- */
@media (max-width: 575.98px){

	.main-header .navbar-brand img,
	.main-header.is-scrolled .navbar-brand img{
		max-width: 115px;
	}

	.main-header .header-btn-mobile{
		margin-right: 10px;
	}

	.main-header .header-btn-mobile .btn-default{
		font-size: 13px;
		padding: 10px 36px 10px 14px;
	}

	.main-header .header-btn-mobile .btn-default::before{
		font-size: 14px;
		transform: translate(-14px, -50%);
	}
}


/* ---------- Phones (below 768px): a darker bar instead of the frosted glass (backdrop-filter is costly
   for iPhone Safari on a bar that sits over every section of the page) ---------- */
@media (max-width: 767.98px){

	header.main-header::before{
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(var(--color-black-rgb), 0.6);   /* scrolled: 0.85 (cubix-style.css) */
	}
}


/* ==========================================================================
   03. Hero
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px) ---------- */
@media (max-width: 1199.98px){

	.first-screen .hero_rev #homepage-hero-content{
		top: calc(50% + 40px);
		width: 620px;
	}

	.first-screen .hero_rev #homepage-hero-content h1{
		font-size: 54px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-desc{
		max-width: 520px;
		font-size: 17px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-action-row .hero-opera-badge{
		width: 150px !important;
	}
}

/* ---------- Tablet & mobile (below 992px): video sits faint behind the text ---------- */
@media (max-width: 991.98px){

	.first-screen .hero_rev video{
		opacity: 0.35;
	}

	.hero_rev .hero-overlay{
		background: rgba(var(--color-black-rgb), 0.55);
	}

	.first-screen .hero_rev #homepage-hero-content{
		top: calc(50% + 35px);
		left: 15px;
		right: 15px;
		width: auto;
		max-width: 620px;
	}

	.first-screen .hero_rev #homepage-hero-content h1{
		font-size: 46px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-desc{
		font-size: 16px;
	}

	/* custom.css hides the badge below 992px: show it, smaller */
	.first-screen .hero_rev #homepage-hero-content .hero-action-row .hero-opera-badge{
		display: block;
		width: 130px !important;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.first-screen .hero_rev #homepage-hero-content h1{
		font-size: 38px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-action-row{
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 26px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-action-row .hero-opera-badge{
		width: 115px !important;
	}

	.hero_rev .hero-scroll-down{
		bottom: 10px;
		width: 96px;
		height: 96px;
	}

	.hero_rev .hero-scroll-mouse{
		width: 28px;
		height: 54px;
	}
}

/* ---------- Small mobile (below 576px) ---------- */
@media (max-width: 575.98px){

	.first-screen .hero_rev #homepage-hero-content h1{
		font-size: 32px;
	}

	.first-screen .hero_rev #homepage-hero-content .hero-desc{
		font-size: 15px;
	}
}


/* ==========================================================================
   04. Clients (home page)
   ========================================================================== */

/* ---------- Tablet & mobile (below 992px) ---------- */
@media (max-width: 991.98px){

	.home-page .home-clients{
		padding: 50px 0;
	}

	.home-page .home-clients .section-title{
		margin-bottom: 30px;
	}

	.home-page .home-client{
		width: 200px;
		padding: 0 8px;
	}

	.home-page .home-client-card{
		height: 96px;
		padding: 14px 16px;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.home-page .home-clients{
		padding: 40px 0;
	}

	.home-page .home-client{
		width: 160px;
		padding: 0 6px;
	}

	.home-page .home-client-card{
		height: 80px;
		padding: 12px 14px;
		border-radius: 10px;
	}

	/* narrower fade so more cards stay clear on a small screen */
	.home-page .home-clients-slider{
		-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
	}
}


/* ==========================================================================
   05. About (home page)
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px): two narrow columns, smaller product tags ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){

	.home-page .home-about .cx-chip{
		font-size: 12px;
		padding: 6px 11px 6px 8px;
	}
}

/* ---------- Tablet & mobile (below 992px): logo on top, text below ---------- */
@media (max-width: 991.98px){

	.home-page .home-about{
		padding: 60px 0;
	}

	.home-page .home-about .cx-planet{
		width: 54px;
		height: 54px;
	}

	.home-page .home-about-content .section-title p{
		font-size: 17px;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.home-page .home-about{
		padding: 50px 0;
	}

	.home-page .home-about-content .section-title p{
		font-size: 16px;
	}

	.home-page .home-about .about-points li{
		padding-left: 56px;
	}

	.home-page .home-about-icon{
		width: 40px;
		height: 40px;
	}

	.home-page .home-about .about-points li::after{
		left: 19px;
		top: 46px;
	}

	.home-page .home-about .about-points strong{
		font-size: 18px;
	}

	.home-page .home-about .about-points li > span:not(.home-about-icon){
		font-size: 15px;
	}
}

/* ---------- Phones (below 561px): square box like custom.css, compact tags ---------- */
@media (max-width: 560px){

	.home-page .home-about .cx-orbit{
		aspect-ratio: 1 / 1;
	}

	.home-page .home-about .cx-chip{
		padding: 6px 11px 6px 8px;
	}

	/* smaller icons: the ring has to fit the phone's width */
	.home-page .home-about .cx-planet{
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}
}


/* ==========================================================================
   06. Home side decorations
   ========================================================================== */

/* Below 1200px the container fills the screen: no side space, so no decorations */
@media (max-width: 1199.98px){

	.home-page .home-side-word,
	.home-page .home-side-label{
		display: none;
	}
}


/* ==========================================================================
   07. Products (home page)
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px): smaller cards and side texts so they never touch ---------- */
@media (max-width: 1199.98px){

	.home-page .showcase{
		--sc-header: 80px;
		--sc-card-w: min(270px, calc((100vh - var(--sc-header) - var(--sc-bottom) - var(--sc-ctl-h) - 60px) * 0.9));
		--sc-mid-w: 36px;
		--sc-gap: 22px;
		--sc-side-gap: 30px;
	}

	.home-page .showcase dd{
		font-size: 18px;
	}

	/* no room beside the container for the product rails, and no room between the quote and the
	   card stacks for the big outlined names */
	.home-page .showcase .sc-rail,
	.home-page .showcase .sc-names{
		display: none;
	}

	/* without the big names the board is placed as before: centred between the header and the bottom line */
	.home-page .showcase{
		--sc-quote-h: 0px;
		--sc-names-h: 0px;
		--sc-mid: calc(var(--sc-header) + (100vh - var(--sc-header) - var(--sc-bottom)) / 2);
	}

	.home-page .showcase .top .sw,
	.home-page .showcase .bottom .sw{
		white-space: normal;
	}

	/* card face: a little tighter */
	.home-page .showcase .sc-face{
		padding: 16px 18px;
	}

	.home-page .showcase .sc-no{
		font-size: 28px;
	}

	.home-page .showcase .sc-face-head,
	.home-page .showcase .sc-face-foot small{
		font-size: 11px;
	}

	.home-page .showcase .sc-face-logo img{
		max-height: min(76px, 100%);           /* shrinks to fit the top half */
	}

	.home-page .showcase .sc-face-row{
		gap: 10px;
	}

	.home-page .showcase .sc-face-row h3{
		font-size: 20px;
	}
}

/* ---------- Tablet & mobile (below 992px): only the board (no side texts, top or bottom line) ---------- */
@media (max-width: 991.98px){

	.home-page .showcase{
		--sc-header: 70px;
		--sc-bottom: 30px;
		--sc-card-w: min(340px, calc((100vw - 30px - var(--sc-mid-w) - var(--sc-gap) * 2) / 2), calc((100vh - var(--sc-header) - var(--sc-bottom) - var(--sc-ctl-h) - 60px) * 0.9));
	}

	/* same title size and top space as the other home sections on tablets */
	.home-page .showcase .heading{
		padding-top: 60px;
	}

	.home-page .showcase .side,
	.home-page .showcase .top,
	.home-page .showcase .bottom{
		display: none;
	}
}

/* ---------- Mobile (below 768px): the title sits above the board; the two cards one under the other,
   the counter + step rail between them, sized so the whole board fits the screen ---------- */
@media (max-width: 767.98px){

	.home-page .showcase{
		--sc-bottom: 20px;
		--sc-ctl-h: 70px;
		--sc-gap: 12px;
		/* card height ~ 0.8 x its width: two cards + counter + buttons fit under the header */
		--sc-card-w: min(340px, calc(100vw - 48px), calc((100vh - 250px) / 1.6));
		--sc-mid: calc(var(--sc-header) + (100vh - var(--sc-header) - var(--sc-bottom)) / 2);
	}

	@supports (height: 100svh){
		.home-page .showcase{
			--sc-card-w: min(340px, calc(100vw - 48px), calc((100svh - 250px) / 1.6));
			--sc-mid: calc(var(--sc-header) + (100svh - var(--sc-header) - var(--sc-bottom)) / 2);
		}

		.home-page .showcase .stage{
			height: 100svh;              /* the board always fits the visible screen (address bar shown) */
		}
	}

	/* the title is part of the page above the pinned board (js/products-scroll.js reads this) */
	.home-page .showcase .heading{
		position: relative;
		padding-top: 50px;
		padding-bottom: 10px;
	}

	.home-page .showcase .sc-flip{
		width: var(--sc-card-w);
	}

	.home-page .showcase .sc-board{
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.home-page .showcase .sc-unit.l,
	.home-page .showcase .sc-unit.r{
		transform: rotateX(calc(4deg + var(--rx)));
	}

	.home-page .showcase .sc-housing{
		padding: 8px;
		border-radius: 24px;
	}

	/* card stacks: thinner edges and no tilt, so a full stack (7 cards) fits the small gaps around the stacked cards */
	.home-page .showcase .sc-unit{
		--sc-leaf-step: 1.6px;
	}

	.home-page .showcase .sc-leaf{
		--jr: 0deg !important;               /* beats the per-sheet tilt js writes inline */
	}

	.home-page .showcase .sc-stack.is-bot .sc-leaf{
		border-radius: 0 0 18px 18px;
	}

	.home-page .showcase .sc-stack.is-top .sc-leaf{
		border-radius: 18px 18px 0 0;
	}

	.home-page .showcase .sc-floor{
		bottom: -16px;
		height: 20px;
	}

	.home-page .showcase .sc-flipcard{
		--r: 16px;
		aspect-ratio: 11 / 8.6;
	}

	.home-page .showcase .sc-face{
		padding: 12px 16px 14px;
	}

	.home-page .showcase .sc-no{
		font-size: 24px;
	}

	.home-page .showcase .sc-face-head,
	.home-page .showcase .sc-face-foot small{
		font-size: 10px;
	}

	.home-page .showcase .sc-face-logo img{
		max-height: min(64px, 100%);           /* shrinks to fit the top half */
	}

	.home-page .showcase .sc-face-foot{
		gap: 2px;
	}

	/* name and button side by side on phones (the card is wider than tall) */
	.home-page .showcase .sc-face-row{
		grid-template-columns: 1fr auto;
		align-items: center;
		width: 100%;
		gap: 10px;
	}

	.home-page .showcase .sc-face-row h3{
		font-size: 18px;
	}

	/* counter + dots: one row between the cards */
	.home-page .showcase .sc-mid{
		grid-auto-flow: column;
		align-items: center;
		gap: 12px;
		transform: none;
	}

	.home-page .showcase .sc-count{
		padding: 5px 12px;
		writing-mode: horizontal-tb;
		font-size: 11px;
	}

	/* dots side by side; the current one a wide gradient pill */
	.home-page .showcase .sc-dots{
		flex-direction: row;
		gap: 8px;
	}

	.home-page .showcase .sc-dots button{
		width: 8px;
		height: 8px;
	}

	.home-page .showcase .sc-dots button.is-active{
		width: 24px;
		height: 8px;
		background: var(--gradient-brand);
	}

	.home-page .showcase .sc-ctl{
		height: 64px;
		margin-top: calc(var(--sc-ctl-h) - 64px);
	}

	.home-page .showcase .sc-skip{
		width: 64px;
		height: 64px;
	}

	.home-page .showcase .sc-skip .hero-scroll-ring{
		display: none;                   /* too small for the curved text: only the mouse */
	}

	.home-page .showcase .sc-skip .hero-scroll-mouse{
		width: 24px;
		height: 44px;
		margin: 0;
	}

	.home-page .showcase .sc-skip .hero-scroll-mouse svg{
		width: 10px;
		height: 22px;
	}
}

/* ---------- Short phones (below 768px): when a card is narrower than 240px there is no room for the category
   and name under the logo (the logo already shows the product name): only the number, logo and button stay.
   The name is still read out by screen readers. ---------- */
@media (max-width: 767.98px){

	@container sc-card (max-width: 240px){

		.home-page .showcase .sc-face-foot small{
			display: none;
		}

		.home-page .showcase .sc-face-row{
			grid-template-columns: 1fr;
			justify-items: center;
		}

		.home-page .showcase .sc-face-row h3{
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}
}

/* ---------- Mouse only: the hovered card lifts and its logo glows brighter (touch screens skip it) ---------- */
@media (hover: hover) and (pointer: fine){

	.home-page .showcase .sc-unit:hover{
		--sc-lift: calc(-10 * var(--u));
	}

	/* the floor shadow stays down and gets smaller and lighter, so the card reads as rising off it */
	.home-page .showcase .sc-unit:hover .sc-floor{
		opacity: 0.7;
		transform: translateZ(calc(-40 * var(--u))) translateY(calc(10 * var(--u))) scale(0.9);
	}

	.home-page .showcase .sc-unit:hover .sc-face-logo::before{
		transform: scale(1.2);
	}

	.home-page .showcase .sc-unit:hover .sc-face-logo img{
		transform: translateY(calc(-3 * var(--u))) scale(1.03);
		filter: drop-shadow(0 calc(12 * var(--u)) calc(18 * var(--u)) rgba(var(--color-accent-2-rgb), 0.28));
	}
}

/* ---------- Reduced motion: flips change at once, no tilt ---------- */
@media (prefers-reduced-motion: reduce){

	.home-page .showcase .sc-flap.go,
	.home-page .showcase .sc-flap.go .sc-shade,
	.home-page .showcase .sc-cast.go{
		animation-duration: 0.01s !important;
		animation-delay: 0s !important;
	}

	.home-page .showcase .sc-unit,
	.home-page .showcase .sc-dots button,
	.home-page .showcase .sc-leaf{
		transition: none;
	}}


/* ---------- Phones (below 768px): the same look without the blur effects. iPhone Safari ran out of
   graphics memory here (blank page) and stopped repainting the flipping cards (counter moved, cards did
   not): frosted glass behind 3D-flipping cards, over big blurred shapes that move on every scroll ---------- */
@media (max-width: 767.98px){

	.home-page .showcase .sc-housing{
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(var(--color-white-rgb), 0.92);
	}

	.home-page .showcase .sc-count{
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(var(--color-white-rgb), 0.95);
	}

	.home-page .showcase .blob{
		display: none;
	}

	.home-page .showcase .sc-board::after,
	.home-page .showcase .sc-floor,
	.home-page .showcase .sc-face-logo::before{
		filter: none;
	}

	.home-page .showcase .heading{
		will-change: auto;               /* the title is not animated on phones */
	}
}


/* ==========================================================================
   08. Services (home page)
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px): three narrow cards per row ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){

	.home-page .our-services .service-item{
		padding: 24px;
	}

	.home-page .our-services .service-item .icon-box img{
		max-width: 64px;
	}

	.home-page .our-services .service-title h3{
		font-size: 18px;
	}
}

/* ---------- Tablet (below 992px): two cards per row, the last one centred ---------- */
@media (max-width: 991.98px){

	.home-page .our-services{
		padding: 60px 0;
	}

	.home-page .our-services .section-row{
		margin-bottom: 30px;
	}

	.home-page .our-services .service-item{
		padding: 24px;
	}

	.home-page .our-services .service-item .icon-box{
		margin-bottom: 30px;
	}

	.home-page .our-services .service-item .icon-box img{
		max-width: 60px;
	}

	.home-page .our-services .service-title h3{
		font-size: 18px;
	}

	.home-page .our-services .service-content p{
		font-size: 15px;
	}
}

/* ---------- Below 901px: the pink wash moves from the bottom of the section to the top ---------- */
@media (max-width: 900px){

	.home-page .our-services{
		background:   /* 0.075 = the Products wash on phones (0.08 under its .94 opacity layer) */
			radial-gradient(100% 445px at 0% 0%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
			radial-gradient(100% 445px at 100% 0%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
			var(--color-white);
	}
}

/* ---------- Mobile (below 768px): one card per row, card corners like the Clients cards on phones ---------- */
@media (max-width: 767.98px){

	.home-page .our-services{
		padding: 50px 0;
	}

	.home-page .our-services .service-item{
		padding: 20px;
		border-radius: 10px;
	}

	.home-page .our-services .service-item .icon-box{
		margin-bottom: 24px;
	}

	.home-page .our-services .service-item .icon-box img{
		max-width: 48px;
	}

	.home-page .our-services .service-btn a{
		width: 36px;
		height: 36px;
	}

	.home-page .our-services .service-btn a i{
		font-size: 16px;
	}
}


/* ==========================================================================
   09. Section titles (all pages)
   ========================================================================== */

/* ---------- Tablet (below 992px) ---------- */
@media (max-width: 991.98px){

	.section-title h2.nm-heading.nm-heading,
	.showcase .heading h2.nm-heading.nm-heading{
		font-size: 36px;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.section-title h2.nm-heading.nm-heading,
	.showcase .heading h2.nm-heading.nm-heading{
		font-size: 26px;
	}
}

/* ---------- Below 700px: small title + big title on the left (like the hero), in every home section ---------- */
@media (max-width: 699.98px){

	.section-title,
	.section-row .section-title,
	.home-clients .section-title,
	.showcase .heading{
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}
}


/* ==========================================================================
   10. Feature / Our Solutions (home page)
   ========================================================================== */

/* ---------- Tablet (below 992px): one column, the title + list first, the photos below ---------- */
@media (max-width: 991.98px){

	.home-page .our-feature{
		padding: 60px 0;
	}

	.home-page .our-feature .row > .col-lg-6:last-child{
		order: -1;
	}

	.home-page .our-feature .our-feature-content{
		margin-bottom: 40px;
	}

	.home-page .our-feature .our-feature-images{
		margin-bottom: 0;
	}

	/* top box (security video, 1920 x 1072): the same shape as on desktop (about 1.6 : 1), so the video
	   is never cut: only its empty right edge is trimmed, like on desktop (object-position in cubix-style.css).
	   figure img: beats the phones' fixed 300px photo height below */
	.home-page .our-feature .feature-video figure img{
		height: auto;
		aspect-ratio: 1.61;
		object-fit: cover;
	}

	.home-page .our-feature .company-experience-content h2{
		font-size: 45px;
	}

	.home-page .our-feature .company-experience-content p{
		font-size: 16px;                  /* same label as the Why Choose counters */
	}

	.home-page .our-feature .section-title{
		margin-bottom: 30px;
	}

	.home-page .our-feature .ferature-list-item{
		margin-bottom: 30px;
	}

	.home-page .our-feature .ferature-list-item .icon-box{
		width: 64px;
		height: 64px;
		margin-right: 18px;
	}

	.home-page .our-feature .ferature-list-item .icon-box img{
		max-width: 32px;
	}

	.home-page .our-feature .ferature-list-content{
		width: calc(100% - 82px);
	}

	.home-page .our-feature .ferature-list-content h3{
		font-size: 18px;
	}

	.home-page .our-feature .ferature-list-content p{
		font-size: 15px;
	}
}

/* ---------- Below 901px: pink wash at the top (same as Services), so the section reads as a new one ---------- */
@media (max-width: 900px){

	.home-page .our-feature{
		background:   /* 0.075 = the Products wash on phones (0.08 under its .94 opacity layer) */
			radial-gradient(100% 445px at 0% 0%,   rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
			radial-gradient(100% 445px at 100% 0%, rgba(var(--color-accent-2-rgb), 0.075) 0%, transparent 90%),
			var(--color-white);
	}
}

/* ---------- Mobile (below 768px): experience box under the photo, corners like the Clients cards on phones ---------- */
@media (max-width: 767.98px){

	.home-page .our-feature{
		padding: 50px 0;
	}

	.home-page .our-feature .our-feature-content{
		margin-bottom: 30px;
	}

	.home-page .our-feature .feature-image figure,
	.home-page .our-feature .company-experience-box{
		border-radius: 10px;
	}

	/* both photos: 300px tall, picture cropped to cover */
	.home-page .our-feature .feature-image img,
	.home-page .our-feature .company-experience-info .feature-image img{
		height: 300px;
		min-height: 0;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* lower photo and experience box: one under the other, full width */
	.home-page .our-feature .company-experience-info .feature-image,
	.home-page .our-feature .company-experience-box{
		width: 100%;
	}

	.home-page .our-feature .company-experience-box{
		margin-top: 20px;
	}

	.home-page .our-feature .company-experience-content h2{
		font-size: 30px;
	}

	.home-page .our-feature .ferature-list-item .icon-box{
		width: 44px;
		height: 44px;
		margin-right: 12px;
	}

	.home-page .our-feature .ferature-list-item .icon-box img{
		max-width: 22px;
	}

	.home-page .our-feature .ferature-list-content{
		width: calc(100% - 56px);
	}
}

/* ---------- Reduced motion: server LEDs stay lit, no blinking ---------- */
@media (prefers-reduced-motion: reduce){

	.home-page .our-feature .feature-server .feature-server-leds{
		animation: none;
	}
}


/* ==========================================================================
   11. Why Choose Us (home page)
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px): narrower cards ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){

	.home-page .wcu-swiper .why-choose-item{
		padding: 20px 24px;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box{
		margin-right: 16px;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box img{
		max-width: 60px;
	}

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

	.home-page .wcu-swiper .why-choose-item-content h3{
		font-size: 18px;
	}

	.home-page .wcu-swiper .why-choose-item-content p{
		font-size: 15px;
	}
}

/* ---------- Tablet (below 992px): picture on top with the dots under it, the drum below ---------- */
@media (max-width: 991.98px){

	.home-page .why-choose-us{
		padding: 60px 0;
	}

	.home-page .why-choose-us .section-row{
		margin-bottom: 30px;
	}

	/* picture, dots and the 3 cards fit on one screen: a smaller picture, tighter gaps */
	.home-page .wcu-visual{
		max-width: 400px;
		margin-right: auto;
	}

	.home-page .wcu-dots-pics{
		margin-top: 14px;
		margin-right: 0;
		margin-bottom: 0;                /* stacked here: the dots keep their space */
	}

	.home-page .wcu-cards-col .wcu-swiper{
		margin-top: 14px;                /* = picture -> dots: the card above sits at the top of the drum (JS) */
		row-gap: 12px;                   /* centre card <-> cards above / below (read by the JS) */
	}

	.home-page .wcu-swiper .why-choose-item{
		padding: 20px 24px;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box{
		margin-right: 16px;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box img{
		max-width: 60px;
	}

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

	.home-page .wcu-swiper .why-choose-item-content h3{
		font-size: 18px;
	}

	.home-page .wcu-swiper .why-choose-item-content p{
		font-size: 15px;
	}
}

/* ---------- Mobile (below 768px): corners like the Clients cards on phones ---------- */
@media (max-width: 767.98px){

	.home-page .why-choose-us{
		padding: 50px 0;
	}

	.home-page .wcu-visual,
	.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,
	.home-page .wcu-swiper .why-choose-item{
		border-radius: 10px;
	}

	.home-page .wcu-swiper .why-choose-item{
		padding: 16px 18px;
	}

	/* phones: the picture stays 4:3 (custom.css made it square), centred */
	.home-page .wcu-visual{
		aspect-ratio: 4 / 3;
		margin-left: auto;
		transition: opacity 0.2s ease;
	}

	/* phones: one picture at a time: the old one fades out fully, then the new one fades in
	   (js/home-why-choose.js showPicture) */
	.home-page .wcu-visual.is-swapping{
		opacity: 0;
	}

	/* phones: one flat card at a time (js/home-why-choose.js renderSingle): no layer hint, so
	   Safari draws the text sharp */
	.home-page .wcu-swiper .swiper-slide{
		will-change: auto;
	}

	/* cards a little more compact on phones (the drum is about 2.6 cards tall) */
	.home-page .wcu-swiper .why-choose-item-content h3{
		font-size: 16px;
		margin-bottom: 6px;
	}

	.home-page .wcu-swiper .why-choose-item-content p{
		font-size: 14px;
		line-height: 1.45;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box{
		margin-right: 14px;
	}

	.home-page .wcu-swiper .why-choose-item .icon-box img{
		max-width: 48px;
	}

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

/* ---------- Stats strip, tablet (below 992px): same values custom.css used ---------- */
@media (max-width: 991.98px){

	.home-page .why-choose-us .why-choose-counter-list{
		margin-top: 40px;
		padding-top: 40px;
	}

	.home-page .why-choose-us .why-choose-counter-item .icon-box img{
		max-width: 50px;
	}

	.home-page .why-choose-us .why-choose-counter-content h3{
		font-size: 36px;
	}

	.home-page .why-choose-us .why-choose-counter-content p{
		font-size: 16px;
	}
}

/* ---------- Stats strip, mobile (below 768px): two per row ---------- */
@media (max-width: 767.98px){

	.home-page .why-choose-us .why-choose-counter-list{
		gap: 30px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.home-page .why-choose-us .why-choose-counter-item{
		width: calc(50% - 15px);
	}

	.home-page .why-choose-us .why-choose-counter-item:after{
		right: -15px;
	}

	.home-page .why-choose-us .why-choose-counter-item .icon-box{
		margin-bottom: 10px;
	}

	.home-page .why-choose-us .why-choose-counter-item .icon-box img{
		max-width: 40px;
	}

	.home-page .why-choose-us .why-choose-counter-content h3{
		font-size: 26px;
		margin-bottom: 5px;
	}
}

/* ---------- Below 700px: this section keeps its title centred (block 09 moves the other home titles left) ---------- */
@media (max-width: 699.98px){

	.home-page .why-choose-us .section-title{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

/* ---------- Narrow picture box (phones): the property card drops its subtitle and tag label,
   so the tiles, tags and bar still fit the 4:3 box ---------- */
@container (max-width: 420px){

	.home-page .wcu-props-head small,
	.home-page .wcu-props-tiles + .wcu-props-label{
		display: none;
	}
}

/* ---------- Reduced motion: the property card's badge and bar stay still ---------- */
@media (prefers-reduced-motion: reduce){

	.home-page .wcu-visual-item.is-active .wcu-props-badge,
	.home-page .wcu-visual-item.is-active .wcu-props-bar i::after{
		animation: none;
	}
}


/* ==========================================================================
   12. Testimonials (home page)
   Below 992px: custom.css's tablet / mobile layout (repeated here so the scaled
   desktop rules leave it alone), with tighter gaps so the box fits about one screen.
   ========================================================================== */

/* ---------- Tablet (below 992px) ---------- */
@media (max-width: 991.98px){

	.home-page .our-testimonials{
		padding: 60px 0;
	}

	/* one column here: the title sits centred above the box */
	.home-page .our-testimonials .section-title{
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.home-page .our-testimonials .testimonial-box,
	.home-page .our-testimonials .testimonial-box::before{
		border-radius: 20px;
	}

	.home-page .our-testimonials .testimonial-box{
		gap: 24px;
		padding: 40px 24px 30px;
	}

	.home-page .our-testimonials .testimonial-video-button h3{
		margin-top: 24px;
	}

	.home-page .our-testimonials .testimonial-video-button,
	.home-page .our-testimonials .testimonial-slider-box{
		width: 100%;
	}

	.home-page .our-testimonials .testimonial-video-button a{
		width: 60px;
		height: 60px;
	}

	.home-page .our-testimonials .testimonial-video-button a i{
		font-size: 26px;
	}

	.home-page .our-testimonials .testimonial-slider{
		margin-top: 0;
		padding: 30px;
		border-radius: 20px;
	}

	.home-page .our-testimonials .testimonial-header{
		margin-bottom: 20px;
	}

	.home-page .our-testimonials .testimonial-content{
		margin-bottom: 20px;
	}

	.home-page .our-testimonials .testimonial-content p{
		margin-bottom: 15px;
	}

	/* name row: keeps clear of the prev / next buttons at the bottom right */
	.home-page .our-testimonials .testimonial-body{
		padding-right: 100px;
	}

	.home-page .our-testimonials .testimonial-slider .testimonial-button-next,
	.home-page .our-testimonials .testimonial-slider .testimonial-button-prev{
		width: 32px;
		height: 32px;
	}

	.home-page .our-testimonials .testimonial-slider .testimonial-button-next{
		margin-left: 20px;
	}

	.home-page .our-testimonials .testimonial-slider .testimonial-button-next::before,
	.home-page .our-testimonials .testimonial-slider .testimonial-button-prev::before{
		font-size: 16px;
	}

	.home-page .our-testimonials .testimonial-contact-info{
		gap: 20px;
		margin-top: 20px;
		padding: 0;
	}

	.home-page .our-testimonials .testimonial-contact-box .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.home-page .our-testimonials .testimonial-contact-box .icon-box img{
		max-width: 26px;
	}

	.home-page .our-testimonials .testimonial-contact-content{
		width: calc(100% - 65px);
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.home-page .our-testimonials{
		padding: 50px 0;
	}

	.home-page .our-testimonials .testimonial-box{
		gap: 20px;
		padding: 30px 16px 20px;
	}

	.home-page .our-testimonials .testimonial-video-button h3{
		margin-top: 16px;
		font-size: 16px;
	}

	.home-page .our-testimonials .testimonial-slider{
		padding: 20px;
	}

	.home-page .our-testimonials .testimonial-company-logo img{
		max-width: 130px;
	}

	.home-page .our-testimonials .testimonial-header{
		margin-bottom: 16px;
	}

	.home-page .our-testimonials .testimonial-content{
		margin-bottom: 16px;
	}

	.home-page .our-testimonials .testimonial-content p{
		font-size: 14px;
		margin-bottom: 10px;
	}

	/* the prev / next buttons drop below the card here, so the name row uses the full width */
	.home-page .our-testimonials .testimonial-body{
		padding-right: 0;
	}

	.home-page .our-testimonials .author-image{
		margin-right: 12px;
	}

	.home-page .our-testimonials .author-image figure{
		width: 84px;
		height: 50px;
		padding: 6px;
		border-radius: 6px;
	}

	.home-page .our-testimonials .author-content h3{
		font-size: 18px;
	}

	.home-page .our-testimonials .testimonial-btn{
		bottom: 0;
		margin-top: 16px;
	}

	.home-page .our-testimonials .testimonial-slider .testimonial-button-next{
		margin-left: 10px;
	}

	.home-page .our-testimonials .testimonial-contact-info{
		gap: 16px;
		margin-top: 16px;
	}

	.home-page .our-testimonials .testimonial-contact-box,
	.home-page .our-testimonials .testimonial-contact-btn{
		width: 100%;
		text-align: start;
	}

	.home-page .our-testimonials .testimonial-contact-content p{
		font-size: 14px;
	}
}


/* ==========================================================================
   13. Footer (all pages)
   Below 992px: custom.css's tablet / mobile footer, repeated here so the
   scaled desktop rules leave it as it was.
   ========================================================================== */

/* ---------- Tablet (below 992px) ---------- */
@media (max-width: 991.98px){

	.main-footer{
		padding-top: 40px;
	}

	/* top row: logo + social links in one row, the newsletter full width under them */
	.main-footer .footer-header{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 40px;
		padding-bottom: 30px;
	}

	.main-footer .footer-header .footer-logo{
		order: 1;
		margin: 0;
	}

	.main-footer .footer-header .footer-social-links{
		order: 2;
	}

	.main-footer .footer-header .footer-newsletter-form{
		order: 3;
		flex: 0 0 100%;
		max-width: none;
		margin: 0;
	}

	.main-footer .footer-logo img{
		max-width: 183px;
	}

	.main-footer .footer-quick-links{
		margin: 0 0 30px 0;
	}

	.main-footer .footer-links h3{
		margin-bottom: 15px;
	}

	.main-footer .footer-links p{
		margin-bottom: 20px;
	}

	.main-footer .footer-newsletter-form .form-group .form-control{
		width: calc(100% - 60px);
		padding: 10px 20px;
	}

	.main-footer .footer-newsletter-form .form-group .newsletter-btn{
		width: 50px;
		height: 50px;
	}

	.main-footer .footer-copyright{
		margin-top: 0;
		padding: 24px 0;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.main-footer .footer-header{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.main-footer .footer-social-links ul li{
		margin-right: 10px;
	}

	.main-footer .footer-links h3{
		font-size: 18px;
	}

	.main-footer .footer-copyright{
		padding: 15px 0;
	}

	.main-footer .footer-copyright-text p{
		font-size: 14px;
	}
}


/* ==========================================================================
   14. Preloader (all pages)
   ========================================================================== */

/* ---------- Mobile (below 768px): smaller ring and letters ---------- */
@media (max-width: 767.98px){

	.cx-preloader-spinner{
		width: 110px;
		height: 110px;
		margin-bottom: 24px;
	}

	.cx-preloader-mark{
		width: 76px;
		height: 76px;
	}

	.cx-preloader-letters{
		font-size: 48px;
	}

	.cx-preloader-content p{
		font-size: 13px;
		letter-spacing: 0.35em;
	}
}

/* ---------- Reduced motion: no spinning / flipping; the screen just goes ---------- */
@media (prefers-reduced-motion: reduce){

	.cx-preloader-spinner::before,
	.cx-preloader-letters span::before{
		animation: none;
	}

	.cx-preloader-letters span{
		color: var(--color-white);
	}

	.cx-preloader-panels i::before,
	.cx-preloader-content{
		transition: none;
	}
}


/* ==========================================================================
   15. Back to top (all pages)
   ========================================================================== */

/* ---------- Mobile (below 768px): a little smaller, closer to the corner ---------- */
@media (max-width: 767.98px){

	.cx-back-top{
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
	}

	.cx-back-top i{
		font-size: 16px;
	}
}

/* ---------- Reduced motion: no slide / lift ---------- */
@media (prefers-reduced-motion: reduce){

	.cx-back-top,
	.cx-back-top.is-visible:hover{
		transform: none;
		transition: opacity 0.2s, visibility 0.2s;
	}
}


/* ==========================================================================
   16. Page header (inner pages)
   ========================================================================== */

/* ---------- Tablet (below 992px) ---------- */
@media (max-width: 991.98px){

	.page-header{
		height: 300px;
		padding: 0;
	}

	.page-header-box{
		margin-top: 70px;
	}

	.page-header-box h1{
		font-size: 36px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 15px;
	}
}

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767.98px){

	.page-header{
		height: 260px;
	}

	/* phones: a small 3:2 crop (780 x 520) that keeps the subject in view */
	.page-header.page-header-about{
		background-image: url('../images/page-header/about-mobile.webp');
	}

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

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

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

	.page-header-box{
		margin-top: 60px;
	}

	.page-header-box h1{
		font-size: 26px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 14px;
	}
}


/* ==========================================================================
   17. Contact page
   ========================================================================== */

/* ---------- Tablet (below 992px) ---------- */
@media (max-width: 991.98px){

	.page-contact-us{
		padding: 60px 0;
	}

	.page-contact-us .section-row{
		margin-bottom: 30px;
	}

	.page-contact-us .section-row .section-title{
		max-width: 100%;
	}

	.page-contact-box{
		margin-top: 90px;
		padding: 0 30px 40px;
	}

	.contact-info-list{
		gap: 20px;
		padding: 20px;
		margin: -90px 0 30px;
	}

	.contact-info-item{
		width: calc(33.33% - 13.33px);
	}

	.contact-info-item:before{
		right: -10px;
	}

	.page-contact-us .contact-info-item{
		width: calc(50% - 10px);
	}

	.page-contact-us .contact-info-content .contact-info-desc{
		margin-bottom: 8px;
	}

	.contact-info-item .icon-box{
		width: 50px;
		height: 50px;
		margin-bottom: 20px;
	}

	.contact-info-item .icon-box img{
		max-width: 25px;
	}

	.contact-info-content h3{
		margin-bottom: 10px;
	}

	.contact-info-content p{
		font-size: 14px;
	}

	.contact-us-form .section-title{
		margin-bottom: 24px;
	}

	.member-contact-form.contact-form .form-control{
		padding: 10px 14px;
	}

	.cx-select-btn{
		padding: 10px 40px 10px 14px;
	}

	.member-contact-form.contact-form .form-group{
		margin-bottom: 16px;
	}

	.member-contact-form.contact-form .form-label{
		font-size: 14px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 500px;
	}
}

/* ---------- Mobile (below 768px): offices one under another, corners like the other cards on phones ---------- */
@media (max-width: 767.98px){

	.page-contact-us{
		padding: 50px 0;
	}

	.page-contact-box{
		margin-top: 50px;
		padding: 0 20px 30px;
	}

	.page-contact-box,
	.page-contact-box:before,
	.contact-info-list,
	.member-contact-form.contact-form .form-control{
		border-radius: 10px;
	}

	.contact-info-list{
		gap: 30px;
		margin: -50px 0 30px;
	}

	.contact-info-item,
	.page-contact-us .contact-info-item{
		width: 100%;
	}

	/* one under another: a line under every office except the last */
	.page-contact-us .contact-info-item:nth-child(2n):before{
		display: block;
	}

	.page-contact-us .contact-info-item:last-child:before{
		display: none;
	}

	.contact-info-item:before{
		top: auto;
		right: 0;
		bottom: -15px;
		left: 0;
		width: 100%;
		height: 1px;
		transform: none;
	}

	.contact-info-item .icon-box{
		margin-bottom: 15px;
	}

	.contact-info-content h3{
		font-size: 18px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}
}


/* ==========================================================================
   18. About page
   ========================================================================== */

/* ---------- Small laptop (below 1200px): smaller cards ---------- */
@media (max-width: 1199.98px){

	.about-page .mission-vision-item{
		padding: 24px;
	}

	.about-page .mission-vision-item .icon-box{
		margin-right: 24px;
	}

	.about-page .mission-vision-item .icon-box img{
		max-width: 64px;
	}

	.about-page .mission-vision-content{
		width: calc(100% - 88px);
	}

	.about-page .mission-vision-content h3{
		font-size: 18px;
	}

	.about-page .about-journey .journey-chart-panel,
	.about-page .about-journey .journey-milestone-card{
		padding: 24px;
	}
}

/* ---------- Tablet (below 992px): photos / cards above, text below ---------- */
@media (max-width: 991.98px){

	.about-page .about-who,
	.about-page .about-mission,
	.about-page .about-why,
	.about-page .about-journey,
	.about-page #about-locations,
	.about-page .about-cta{
		padding: 60px 0;
	}

	.about-page .section-row,
	.about-page .about-journey .journey-section-content > .section-title{
		margin-bottom: 30px;
	}

	.about-page .section-title p{
		font-size: 17px;
	}

	/* "80+" card stacked full width: back to the template number size */
	.about-page .about-journey .journey-card-number{
		font-size: clamp(78px, 14vw, 112px);
	}

	.about-page .about-who .about-us-image{
		margin-right: 0;
		margin-bottom: 30px;
	}

	/* 24/7 badge: 140px (= the old badge on tablets) */
	.about-page .about-who .about-support-badge a{
		width: 140px;
		height: 140px;
	}

	.about-page .about-who .about-badge-core i{
		font-size: 30px;
	}

	.about-page .about-mission .our-approach-content{
		margin-right: 0;
		margin-bottom: 20px;
	}

	.about-page .mission-vision-content p{
		font-size: 15px;
	}

	.about-page #about-locations .page-contact-box{
		margin-top: 60px;                   /* = how far the list rises out of the box */
		padding: 0 28px 32px;
	}

	.about-page #about-locations .contact-info-list{
		gap: 28px;
		padding: 32px;
		margin: -60px 0 0;
		justify-content: center;            /* 2 offices per row (an odd last one would be centred) */
	}

	.about-page #about-locations .contact-info-item{
		width: calc(50% - 14px);
	}

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

	.about-page #about-locations .contact-info-item:before{
		right: -14px;
	}

	.about-page .about-cta .btn-default{
		margin-top: 30px;
	}
}

/* ---------- Mobile (below 768px): one card per row, corners like the other cards on phones ---------- */
@media (max-width: 767.98px){

	.about-page .about-who,
	.about-page .about-mission,
	.about-page .about-why,
	.about-page .about-journey,
	.about-page #about-locations,
	.about-page .about-cta{
		padding: 50px 0;
	}

	/* 24/7 badge: 100px (= the old badge on phones) */
	.about-page .about-who .about-support-badge a{
		width: 100px;
		height: 100px;
	}

	.about-page .about-who .about-badge-core i{
		font-size: 22px;
	}

	.about-page .section-title p{
		font-size: 16px;
	}

	.about-page .about-who figure,
	.about-page .about-who figure img,
	.about-page .about-mission .our-approach-image figure,
	.about-page .about-mission .our-approach-image img,
	.about-page .about-journey .journey-chart-panel,
	.about-page .about-journey .journey-milestone-card{
		border-radius: 10px;
	}

	.about-page .mission-vision-item{
		padding: 20px;
		border-radius: 10px;
	}

	.about-page .mission-vision-item .icon-box{
		margin-right: 15px;
	}

	.about-page .mission-vision-item .icon-box img{
		max-width: 48px;
	}

	.about-page .mission-vision-content{
		width: calc(100% - 63px);
	}

	/* "Why choose Cubix" cards have no icon */
	.about-page .about-why .mission-vision-content{
		width: 100%;
	}

	/* offices one under another, a line between them (like the Contact page) */
	.about-page #about-locations .page-contact-box{
		margin-top: 40px;                   /* = how far the list rises out of the box */
		padding: 0 18px 24px;
	}

	.about-page #about-locations .contact-info-list{
		gap: 30px;
		padding: 24px;
		margin: -40px 0 0;
	}

	.about-page #about-locations .contact-info-item{
		width: 100%;
	}

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

	.about-page #about-locations .contact-info-item:last-child:before{
		display: none;
	}
}

/* ---------- Below 700px: titles on the left, like every home section ---------- */
@media (max-width: 699.98px){

	.about-page .about-journey .journey-section-content > .section-title{
		text-align: left;
	}

	.about-page .about-journey .journey-section-content > .section-title p{
		margin-left: 0;
	}

	/* the closing call to action stays centred on phones (title + button), like on desktop */
	.about-page .about-cta .section-title{
		text-align: center;
	}
}

/* ---------- Phones (below 576px): compact journey cards (custom.css values) ---------- */
@media (max-width: 575.98px){

	/* both cards only as tall as their content, so they stay wider than tall */
	.about-page .about-journey .journey-chart-panel,
	.about-page .about-journey .journey-milestone-card{
		min-height: 0;
	}

	.about-page .about-journey .journey-chart-panel{
		padding: 22px 12px 16px;
	}

	/* bars stay inside the card (the Bootstrap row is 15px wider on each side, the columns only 5px) */
	.about-page .about-journey .journey-chart-bars{
		margin-right: -5px;
		margin-left: -5px;
	}

	.about-page .about-journey .journey-chart-bars .col{
		padding-right: 5px;
		padding-left: 5px;
	}

	.about-page .about-journey .journey-milestone-card{
		padding: 24px;
	}
}

/* ---------- Reduced motion: the 24/7 badge text and the mission picture stay still (no rings, ripple or twinkle) ---------- */
@media (prefers-reduced-motion: reduce){

	.about-page .about-who .about-badge-ring,
	.about-page .about-mission .mission-fx *{
		animation: none;
	}
}



/* ---------- Sister concerns, tablets / phones ---------- */
@media (max-width: 1199.98px){

	.about-page .about-family .family-tree{
		height: 110px;
	}

	.about-page .about-family .family-hub{
		padding: 12px 24px;
	}

	.about-page .about-family .family-hub img{
		height: 32px;
	}

	.about-page .about-family .family-lines{
		top: 30px;
		left: -12px;                     /* half the 24px gap: the lines end in the middle of each card */
		width: calc(100% + 24px);
		height: 80px;
	}

	.about-page .about-family .family-grid{
		gap: 24px;
	}

	.about-page .about-family .family-logo{
		height: 180px;
		padding: 24px 30px;
	}

	.about-page .about-family .family-body{
		padding: 24px;
	}

	.about-page .about-family .family-name{
		font-size: 28px;
	}

	.about-page .about-family .family-name span{
		font-size: 14px;
	}

	.about-page .about-family .family-body p{
		font-size: 15px;
		margin-bottom: 22px;
	}

	.about-page .about-family .family-card::before{
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 991.98px){

	.about-page .about-family{
		padding: 60px 0;
	}
}

/* phones: the cards one under the other; one simple line down the left, from the Cubix pill,
   with a dot at each card (it is drawn from the top when it comes into view) */
@media (max-width: 767.98px){

	.about-page .about-family{
		padding: 50px 0;
	}

	.about-page .about-family .section-row .section-title{
		text-align: left;
	}

	.about-page .about-family .family-tree{
		height: auto;
		margin-bottom: 18px;
	}

	.about-page .about-family .family-hub{
		position: relative;
		left: 0;
		display: inline-flex;
		padding: 10px 20px;
		transform: scale(0.6);
		transform-origin: left center;
	}

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

	.about-page .about-family .family-hub img{
		height: 28px;
	}

	.about-page .about-family .family-lines{
		display: none;
	}

	.about-page .about-family .family-grid{
		position: relative;
		grid-template-columns: 1fr;
		gap: 22px;
		padding-left: 26px;
	}

	/* the line: from the pill above down to the last card's dot */
	.about-page .about-family .family-grid::before{
		content: '';
		position: absolute;
		top: -18px;
		bottom: 0;
		left: 8px;
		width: 2px;
		border-radius: 2px;
		background: linear-gradient(var(--color-accent), var(--color-accent-2));
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 1s cubic-bezier(.22, 1, .36, 1) 0.2s;
	}

	.about-page .about-family .family-tree.animated + .family-grid::before{
		transform: scaleY(1);
	}

	/* each card's dot sits on the line */
	.about-page .about-family .family-card::before{
		top: 40px;
		left: -18px;
	}

	.about-page .about-family .family-card,
	.about-page .about-family .family-logo{
		border-radius: 10px;
	}

	.about-page .about-family .family-logo{
		height: 140px;
		padding: 18px 22px;
		border-radius: 10px 10px 0 0;
	}

	.about-page .about-family .family-body{
		padding: 20px;
	}

	.about-page .about-family .family-name{
		font-size: 26px;
	}

	.about-page .about-family .family-body p{
		font-size: 15px;
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce){
	.about-page .about-family .family-grid::before{ transition: none; }
}


/* ==========================================================================
   19. Services page
   ========================================================================== */

/* ---------- Small laptop (below 1200px): smaller cards, like the home Services cards ---------- */
@media (max-width: 1199.98px){

	.services-page .service-core-card,
	.services-page .support-feature{
		padding: 24px;
	}

	.services-page .service-core-card .icon-box img{
		max-width: 64px;
	}

	.services-page .service-core-card .service-title h3,
	.services-page .support-feature h3,
	.services-page .process-step h3{
		font-size: 18px;
	}
}

/* ---------- Tablet (below 992px): text above the picture, two cards per row ---------- */
@media (max-width: 991.98px){

	.services-page .services-core,
	.services-page .service-detail-section,
	.services-page .services-process-section,
	.services-page .services-products-section,
	.services-page .services-cta{
		padding: 60px 0;
	}

	.services-page .section-row{
		margin-bottom: 30px;
	}

	.services-page .section-title p{
		font-size: 17px;
	}

	/* core services: 2 per row, the fifth card centred (justify-content-center in the HTML) */
	.services-page .service-core-card .icon-box{
		margin-bottom: 30px;
	}

	.services-page .service-core-card .icon-box img{
		max-width: 60px;
	}

	.services-page .service-core-card .service-content p{
		font-size: 15px;
	}

	/* service details: columns stack, 30px between text and picture */
	.services-page .service-detail-row{
		row-gap: 30px;
		margin-right: -15px;
		margin-left: -15px;
	}

	.services-page .service-detail-row > *{
		padding-right: 15px;
		padding-left: 15px;
	}

	.services-page .service-capability-list{
		margin-top: 24px;
	}

	.services-page .services-products-section .section-row .btn-default,
	.services-page .services-cta .btn-default{
		margin-top: 30px;
	}

	/* how we work: 2 x 2, no line; the steps still come in one after another, a little quicker */
	.services-page .services-process-grid{
		--process-step: 250ms;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 30px;
	}

	.services-page .services-process-grid::before{
		display: none;
	}

	.services-page .process-step p{
		max-width: none;
		font-size: 15px;
	}

	/* client ticker: same sizes as the home Clients cards on tablets */
	.services-page .services-client{
		width: 200px;
		padding: 0 8px;
	}

	.services-page .services-client-card{
		height: 96px;
		padding: 14px 16px;
	}
}

/* ---------- Mobile (below 768px): one card per row, corners like the other cards on phones ---------- */
@media (max-width: 767.98px){

	.services-page .services-core,
	.services-page .service-detail-section,
	.services-page .services-process-section,
	.services-page .services-products-section,
	.services-page .services-cta{
		padding: 50px 0;
	}

	.services-page .section-title p{
		font-size: 16px;
	}

	.services-page .service-core-card,
	.services-page .support-feature{
		padding: 20px;
		border-radius: 10px;
	}

	.services-page .service-core-card .icon-box{
		margin-bottom: 24px;
	}

	.services-page .service-core-card .icon-box img{
		max-width: 48px;
	}

	.services-page .service-core-card .service-btn a{
		width: 36px;
		height: 36px;
	}

	.services-page .service-core-card .service-btn a i{
		font-size: 16px;
	}

	.services-page .service-capability-list span{
		font-size: 14px;
	}

	.services-page .service-photo{
		border-radius: 10px;
	}

	.services-page .support-feature .icon-box{
		margin-bottom: 18px;
	}

	/* product ticker: smaller cards, narrower edge fade (like the home Clients slider on phones) */
	.services-page .services-product{
		width: 226px;                       /* wide enough for "CampusLink Pro" on one line */
		padding: 0 6px;
	}

	.services-page .services-product-card{
		gap: 12px;
		padding: 12px 14px;
		border-radius: 10px;
	}

	.services-page .services-product-card img{
		width: 40px;
		height: 40px;
	}

	.services-page .services-product-card b{
		font-size: 15px;
	}

	.services-page .services-product-card small{
		font-size: 13px;
	}

	.services-page .services-products-slider{
		-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
	}
	/* client ticker: same sizes as the home Clients cards on phones */
	.services-page .services-clients-slider{
		margin-top: 12px;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
	}

	.services-page .services-client{
		width: 160px;
		padding: 0 6px;
	}

	.services-page .services-client-card{
		height: 80px;
		padding: 12px 14px;
		border-radius: 10px;
	}
}

/* ---------- Below 700px: titles on the left, like every home section ---------- */
@media (max-width: 699.98px){

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

	/* the closing call to action stays centred on phones (title + button), like on desktop */
	.services-page .services-cta .section-title{
		text-align: center;
	}
}

/* ---------- Phones (below 576px): smaller support icons, steps as a list ---------- */
@media (max-width: 575.98px){

	.services-page .support-feature .icon-box{
		width: 46px;
		height: 46px;
	}

	.services-page .support-feature .icon-box img{
		width: 24px;
		max-height: 24px;
	}

	.services-page .support-feature h3{
		font-size: 16px;
	}

	/* how we work: one step per row, number on the left */
	.services-page .services-process-grid{
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.services-page .process-step{
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 15px;
		text-align: left;
	}

	.services-page .process-step > span{
		grid-row: span 2;
		margin: 0;
	}

	.services-page .process-step h3{
		align-self: end;
		margin-bottom: 5px;
	}

	.services-page .process-step p{
		grid-column: 2;
	}
}

/* ---------- Reduced motion: the service pictures stay still, no moving parts on them ---------- */
@media (prefers-reduced-motion: reduce){

	.services-page .service-photo-scene{
		animation: none;
	}

	.services-page .service-photo-fx{
		display: none;
	}
}


/* ==========================================================================
   20. Full-screen menu (all pages)
   Below 992px: one column; a section's pages open under it (tap).
   ========================================================================== */

/* ---------- Small laptop (992px – 1199px): no room at the screen edge, menu button sits next to the logo ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){

	.main-header .cx-menu-trigger--icon{
		position: static;
		transform: none;
		margin: 0 20px 0 -10px;
	}
}

/* ---------- Tablet / mobile (below 992px) ---------- */
@media (max-width: 991.98px){

	/* menu button left of the logo: the header hamburger opens the menu here */
	.main-header .cx-menu-trigger--icon{
		display: none;
	}

	.cx-menu{
		padding: 24px 6% 40px;
	}

	.cx-menu__top{
		grid-template-columns: auto 1fr;
		margin-bottom: 32px;
	}

	.cx-menu__top > span:last-child{
		display: none;
	}

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

	.cx-menu__logo img{
		height: 36px;
	}

	.cx-menu__body{
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cx-menu__panel{
		display: none;
	}

	.cx-menu__link{
		font-size: 22px;
	}

	.cx-menu__mobile-sub{
		padding: 4px 0 10px 14px;
	}

	.cx-menu__mobile-sub.is-visible{
		display: block;
	}

	.cx-menu__mobile-sub a{
		display: block;
		padding: 9px 0;
		font-size: 15px;
		color: rgba(var(--color-white-rgb), 0.8);
		border-bottom: 1px solid rgba(var(--color-white-rgb), 0.1);
	}

	.cx-menu__mobile-sub .cx-menu__group-title{
		margin: 12px 0 0;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: rgba(var(--color-white-rgb), 0.5);
	}

	.cx-menu__contact{
		text-align: left;
	}

	.cx-menu__social{
		justify-content: flex-start;
	}
}

/* ---------- Reduced motion: no fades / slides ---------- */
@media (prefers-reduced-motion: reduce){

	.cx-menu,
	.cx-menu *,
	.cx-menu::before,
	.cx-menu::after{
		transition: none !important;
		animation: none !important;
	}

	.cx-menu__main > li,
	.cx-menu__sub li{
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- Split layout (.cx-menu--split), below 992px: one column, the brand mark behind ---------- */
@media (max-width: 991.98px){

	.cx-menu--split{
		display: block;
		padding: 24px 6% 40px;
		background:
			radial-gradient(circle at 100% 0%, rgba(var(--color-accent-2-rgb), 0.28), transparent 45%),
			radial-gradient(circle at 0% 100%, rgba(var(--color-accent-rgb), 0.2), transparent 45%),
			var(--cx-navy);
	}

	/* the mark and its glow: centred on the screen, smaller */
	.cx-menu--split::before,
	.cx-menu--split::after{
		position: fixed;
		left: 50%;
	}

	.cx-menu--split::before{
		width: 520px;
		height: 520px;
	}

	.cx-menu--split::after{
		height: 340px;
		opacity: 0.07;
	}

	.cx-menu--split .cx-menu__top{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		margin-bottom: 32px;
	}

	.cx-menu--split .cx-menu__body{
		display: grid;
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* back in normal order: no desktop column / row places */
	.cx-menu--split .cx-menu__close,
	.cx-menu--split .cx-menu__logo,
	.cx-menu--split .cx-menu__main,
	.cx-menu--split .cx-menu__panel,
	.cx-menu--split .cx-menu__contact{
		grid-column: auto;
		grid-row: auto;
	}

	.cx-menu--split .cx-menu__close{
		margin: 0;
		font-size: 22px;
	}

	.cx-menu--split .cx-menu__close span{
		font-size: 30px;
	}

	.cx-menu--split .cx-menu__logo{
		justify-self: end;
	}

	.cx-menu--split .cx-menu__logo img{
		height: 36px;
	}

	.cx-menu--split .cx-menu__main,
	.cx-menu--split .cx-menu__contact{
		padding: 0;
	}

	.cx-menu--split .cx-menu__link{
		padding: 8px 0;
		font-size: 24px;
	}

	.cx-menu--split .cx-menu__contact h4{
		margin-top: 22px;
		font-size: 20px;
	}

	.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){
		font-size: 15px;
	}

	.cx-menu--split .cx-menu__social a{
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}