/*
Theme Name:   QAS Dubai Landing
Theme URI:    https://qasdubai.com
Description:  Block-theme revamp of Quick Accounting Services Dubai (qasdubai.com): full multi-page website built with native WordPress & Spectra blocks, with no page builder. Child theme of Twenty Twenty-Five.
Author:       Interpret Media
Template:     twentytwentyfive
Version:      2.7.4
Requires at least: 6.6
Text Domain:  qasl
GitHub Theme URI: https://github.com/interpret-dev/qasdubai-landing
Primary Branch: main
*/

/* ---------------------------------------------------------------
   Tokens (measured from inquiry.qasdubai.com at 1536px wide)
   --------------------------------------------------------------- */
:root {
	--blue: #3194CC;
	--cream: #F6F3EC;
	--ink: #000;
	--text: #4B4B4B;
	--light: #8A8A8A;
	--line: #E0E0E0;
	--field: #F2F2F2;
	--wrap: 1290px;
	--gutter: 30px;
	--r: 30px;
	--ease: cubic-bezier(.25, .46, .45, .94);
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
	--arrow-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2a9 9 0 0 1 9 9'/%3E%3Cpath d='M13 6a5 5 0 0 1 5 5'/%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--icon-arrow-ur: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 17 17 7M8 7h9v9%27/%3E%3C/svg%3E");
	--badge-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpath id='r' d='M100,100 m-82,0 a82,82 0 1,1 164,0 a82,82 0 1,1 -164,0'/%3E%3C/defs%3E%3Ctext font-family='Roboto,sans-serif' font-size='14' font-weight='700' letter-spacing='1px' fill='%232F7CB8'%3E%3CtextPath href='%23r' textLength='512' lengthAdjust='spacing'%3EWHAT CLIENTS SAY %C2%B7 WHAT CLIENTS SAY %C2%B7 WHAT CLIENTS SAY %C2%B7 %3C/textPath%3E%3C/text%3E%3C/svg%3E");
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: #fff; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wp-site-blocks { padding: 0; overflow-x: clip; }
.wp-site-blocks > *, .qasl-main > * { margin-block-start: 0 !important; }
#about, #partners { scroll-margin-top: calc(110px + var(--wp-admin--admin-bar--height, 0px)); }
.qasl-icon { display: inline-grid; place-items: center; box-sizing: border-box; flex: none; }
.qasl-icon svg { width: 100%; height: 100%; }
.qasl-wrap { max-width: var(--wrap); margin-inline: auto !important; width: 100%; }
.qasl-section { padding-inline: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ---------------------------------------------------------------
   Entrance motion (the landing page's opal-move-up / left / right)
   Elements start hidden only when JS is running on frontend (never in Block Editor); site.js adds .is-in on view.
   --------------------------------------------------------------- */
.js body:not(.block-editor-page) .qasl-a-up:not(.editor-styles-wrapper *),
.js body:not(.block-editor-page) .qasl-a-left:not(.editor-styles-wrapper *),
.js body:not(.block-editor-page) .qasl-a-right:not(.editor-styles-wrapper *),
.js body:not(.block-editor-page) .qasl-label:not(.editor-styles-wrapper *) { opacity: 0; }
/* ---------------------------------------------------------------
   Editor Canvas Harmonization (Ensures Site Editor matches frontend)
   --------------------------------------------------------------- */
.editor-styles-wrapper .qasl-header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	z-index: 90 !important;
}
.editor-styles-wrapper .qasl-badge {
	position: absolute !important;
	left: 50% !important;
	top: -70px !important;
	width: 200px !important;
	height: 200px !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
}
.editor-styles-wrapper .qasl-footer__cta {
	position: absolute !important;
	left: 50% !important;
	top: -20px !important;
	width: 160px !important;
	height: 160px !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.editor-styles-wrapper .qasl-footer__stage {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.editor-styles-wrapper .qasl-quote {
	margin-right: 20px !important;
}
.qasl-a-up.is-in { animation: qaslUp .75s var(--ease) both; }
.qasl-a-left.is-in { animation: qaslLeft .75s var(--ease) both; }
.qasl-a-right.is-in { animation: qaslRight .75s var(--ease) both; }
.qasl-label.is-in { animation: qaslHelix .9s var(--ease) both; }
.qasl-d1.is-in { animation-delay: .05s; } .qasl-d2.is-in { animation-delay: .1s; } .qasl-d3.is-in { animation-delay: .15s; }
.qasl-d4.is-in { animation-delay: .2s; } .qasl-d5.is-in { animation-delay: .25s; }
@keyframes qaslUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes qaslLeft { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: none; } }
@keyframes qaslRight { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: none; } }
@keyframes qaslHelix { from { opacity: 0; transform: perspective(400px) rotateX(80deg); } to { opacity: 1; transform: none; } }
@keyframes qaslTicker { to { transform: translateX(-50%); } }
@keyframes qaslSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   Loader
   --------------------------------------------------------------- */
.qasl-loader { position: fixed; inset: 0; z-index: 1000; background: #fff; display: grid; place-items: center; transition: opacity .5s, visibility .5s; }
.qasl-loader img { width: 170px; height: auto; animation: qaslPulse 1.4s ease-in-out infinite; }
.qasl-loaded .qasl-loader { opacity: 0; visibility: hidden; }
@keyframes qaslPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------
   Header: Palmyra-style transparent full-width overlay navbar
   --------------------------------------------------------------- */
.qasl-header {
	position: fixed;
	z-index: 90;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	margin: 0 !important;
	background: linear-gradient(180deg, rgb(255 255 255 / .78) 0%, rgb(255 255 255 / .38) 68%, transparent 100%);
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease), transform .35s var(--ease);
}
html.is-nav-hidden .qasl-header { transform: translateY(-100%); }
html.is-scrolled .qasl-header {
	background: rgb(255 255 255 / .95);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 34px rgb(11 27 43 / .07);
}
.qasl-pnav { width: 100%; }
.qasl-pnav__inner {
	max-width: 1340px;
	margin: 0 auto;
	padding: 18px 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	transition: padding .3s var(--ease);
}
html.is-scrolled .qasl-pnav__inner { padding: 10px 42px; }
.qasl-pnav__logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.qasl-pnav__logo img {
	height: 76px;
	width: auto;
	object-fit: contain;
	display: block;
	transition: height .3s var(--ease);
}
html.is-scrolled .qasl-pnav__logo img { height: 62px; }

.qasl-pnav__menu { display: flex; align-items: center; }
.qasl-pnav__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	gap: 32px;
}
.qasl-pnav__item { position: relative; margin: 0 !important; }
.qasl-pnav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--roboto), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2.3px;
	text-transform: uppercase;
	color: #0B1B2B !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .22s ease;
}
.qasl-pnav__item.is-active > .qasl-pnav__link,
.qasl-pnav__link:hover,
.qasl-pnav__item:hover > .qasl-pnav__link {
	color: var(--blue) !important;
}
.qasl-nav-chev {
	width: 13px;
	height: 13px;
	opacity: .8;
	transition: transform .25s ease, color .25s ease;
}
.qasl-pnav__item--has-sub:hover > .qasl-pnav__link .qasl-nav-chev {
	transform: rotate(180deg);
	color: var(--blue);
}

/* Hover Dropdown Submenu */
.qasl-pnav__sub {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 250px;
	background: #fff;
	border-radius: 14px;
	padding: 10px !important;
	margin: 0 !important;
	list-style: none !important;
	box-shadow: 0 20px 48px rgb(11 27 43 / .14);
	border: 1px solid rgb(0 0 0 / .06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
	z-index: 100;
}
.qasl-pnav__item--has-sub:hover > .qasl-pnav__sub,
.qasl-pnav__item--has-sub:focus-within > .qasl-pnav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.qasl-pnav__sub li { margin: 0 !important; }
.qasl-pnav__sub a {
	display: block;
	padding: 11px 16px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #0B1B2B !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.qasl-pnav__sub a:hover {
	background: var(--cream);
	color: var(--blue) !important;
	padding-left: 20px;
}

/* Mobile Hamburger Toggle */
.qasl-pnav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid rgb(11 27 43 / .15);
	background: rgb(255 255 255 / .9);
	padding: 10px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.qasl-pnav__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: #0B1B2B;
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
@media (max-width: 1080px) {
	.qasl-pnav__inner { padding: 14px 20px; }
	.qasl-pnav__logo img { height: 60px; }
	.qasl-pnav__toggle { display: flex; }
	.qasl-pnav__menu {
		position: absolute;
		top: 100%;
		left: 16px;
		right: 16px;
		background: #fff;
		border-radius: 20px;
		padding: 20px 24px;
		box-shadow: 0 24px 50px rgb(11 27 43 / .16);
		border: 1px solid var(--line);
		display: none;
		max-height: 80vh;
		overflow-y: auto;
	}
	.qasl-pnav.is-open .qasl-pnav__menu { display: block; }
	.qasl-pnav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.qasl-pnav__link { justify-content: space-between; padding: 12px 8px; }
	.qasl-pnav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: var(--cream);
		margin-top: 4px !important;
		padding: 8px !important;
	}
}

/* ---------------------------------------------------------------
   Buttons: white pill + blue arrow circle, blue pill + white circle
   --------------------------------------------------------------- */
.wp-block-button__link { display: inline-flex !important; align-items: center; gap: 22px; min-height: 62px; transition: color .3s, background-color .3s, border-color .3s; }
.wp-block-button__link::after { content: ""; flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--blue) no-repeat center / 18px var(--arrow); transition: transform .45s var(--ease), background-color .3s; }
.wp-block-button__link:hover::after { transform: rotate(45deg); }
.wp-block-button.is-style-blue .wp-block-button__link { background: var(--blue); border-color: var(--blue); color: #fff; }
.wp-block-button.is-style-blue .wp-block-button__link::after { background-color: #fff; }
.wp-block-button.is-style-blue .wp-block-button__link:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.qasl-btn-plain .wp-block-button__link { min-height: 52px; padding: 14px 30px !important; }
.qasl-btn-plain .wp-block-button__link::after { display: none; }

/* ---------------------------------------------------------------
   Section label: outlined pill, text scrolls through it
   --------------------------------------------------------------- */
.qasl-label { display: inline-flex; width: 140px; height: 35px; overflow: hidden; align-items: center; border: .8px solid var(--blue); border-radius: 20px; margin: 0 0 20px !important; font-size: 12px !important; font-weight: 600; text-transform: uppercase; color: var(--ink) !important; white-space: nowrap; line-height: 1 !important; -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 22%, #000 78%, transparent 96%); mask-image: linear-gradient(90deg, transparent 4%, #000 22%, #000 78%, transparent 96%); }
.qasl-label__track { display: inline-flex; animation: qaslTicker 8s linear infinite; }
.qasl-label__track span { padding: 0 6px; }
.qasl-label__track span::after { content: "·"; margin-left: 12px; }
.qasl-head { text-align: center; margin-bottom: 30px !important; }
.qasl-head h2 { max-width: 680px; margin-inline: auto !important; }

/* ---------------------------------------------------------------
   Headings and text
   --------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
.qasl-section h2 { font-size: 50px; line-height: 1.05; letter-spacing: -2px; margin: 0; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.qasl-hero { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 10px 0; min-height: 630px; }
.qasl-hero > * { margin: 0 !important; }
.qasl-hero__media { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(#7FA8CE, #C9DCEC 60%, #E9EEF2); }
.qasl-hero__city { position: absolute; z-index: 2; left: 0; top: -68px; width: 100%; height: auto; min-height: calc(100% + 136px); margin: 0 !important; will-change: transform; }
.qasl-hero__city img { width: 100%; height: 100%; min-height: 850px; object-fit: cover; display: block; }
.qasl-hero__cloud { position: absolute; z-index: 1; margin: 0 !important; will-change: transform; }
.qasl-hero__cloud img { width: 100%; height: auto; display: block; }
.qasl-hero__cloud--1, .qasl-hero__cloud--a { left: 30%; top: 170px; width: 577px; }
.qasl-hero__cloud--2, .qasl-hero__cloud--b { left: 20%; top: 0; width: 745px; }
.qasl-hero__ticker { position: absolute; z-index: 3; left: 0; right: 0; top: 160px; pointer-events: none; margin: 0 !important; }
.qasl-hero__ticker span, .qasl-hero__ticker .qasl-hero__ticker-item { font-size: 140px !important; font-weight: 500; letter-spacing: -3px; color: #fff !important; line-height: 1 !important; padding-right: 60px; margin: 0 !important; white-space: nowrap; }
.qasl-hero__panel { background: var(--cream); border-radius: var(--r); padding: 56px 75px 56px !important; display: flex; flex-direction: column; justify-content: center; }
.qasl-hero__panel h1 { font-size: 64px; line-height: 68px; letter-spacing: -2px; margin: 0; max-width: 600px; }
.qasl-hero__sub { margin: 22px 0 0 !important; font-size: 21px; line-height: 1.45; font-weight: 500; color: var(--light); max-width: 560px; }
.qasl-hero__panel .wp-block-buttons { margin-top: 30px !important; }

/* Ticker shared by the hero and the expertise pills */
.qasl-ticker { overflow: hidden; display: flex; }
.qasl-ticker__track { display: flex; flex: none; width: max-content; animation: qaslTicker 30s linear infinite; }
.qasl-ticker--rev .qasl-ticker__track { animation-direction: reverse; }

/* ---------------------------------------------------------------
   About + Interactive Tabs (Who We Are / What We Do / Who We Serve)
   --------------------------------------------------------------- */
.qasl-about { margin-top: 100px !important; }
.qasl-about__grid { gap: 110px !important; }
.qasl-about__text { flex: 0 0 650px !important; }
.qasl-about__text h2 { max-width: 580px; }
.qasl-about__lead { margin: 22px 0 0 !important; font-size: 18px; line-height: 26px; }
.qasl-about__link { margin: 16px 0 0 !important; }
.qasl-about__link a { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 5px; }
.qasl-trust { margin: 36px 0 0 !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: 22px; font-weight: 700; color: var(--light); }
.qasl-trust strong { color: var(--ink); }
.qasl-about__side { flex: 0 0 521px !important; position: sticky; top: 100px; align-self: flex-start; }
.qasl-counter { margin: -22px 0 0 !important; display: flex; align-items: flex-start; font-size: clamp(64px, 8vw, 110px); font-weight: 700; line-height: 1; letter-spacing: -5px; color: var(--ink); }
.qasl-counter__plus { color: var(--blue); font-size: 70px; letter-spacing: 0; margin-left: 4px; line-height: .9; }
.qasl-about__caption { margin: 8px 0 20px !important; color: var(--light) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.qasl-about__photo { position: relative; height: 400px; border-radius: var(--r); margin-top: 20px !important; background: url("assets/img/2025/11/about-us-1st-scaled.jpg") center / cover no-repeat; }
.qasl-about__notch { position: absolute; top: -1px; left: -1px; margin: 0 !important; width: 230px; padding: 0 30px 18px 0; background: #fff; border-bottom-right-radius: 30px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--light); }
.qasl-about__notch::after { content: ""; position: absolute; right: -30px; top: 0; width: 30px; height: 30px; background: radial-gradient(circle at 100% 100%, transparent 29px, #fff 30px); }
.qasl-about__notch::before { content: ""; position: absolute; left: 0; bottom: -30px; width: 30px; height: 30px; background: radial-gradient(circle at 100% 100%, transparent 29px, #fff 30px); }

/* About Tabs (Old Site Who We Are / What We Do / Who We Serve) */
.qasl-tabs { margin-top: 28px !important; display: grid !important; gap: 14px !important; }
.qasl-tab-card { background: var(--cream); border-radius: 22px; padding: 22px 28px !important; border: 1px solid transparent; transition: border-color .25s, background-color .25s; }
.qasl-tab-card:hover { border-color: var(--blue); background: #fff; }
.qasl-tab-card h3 { font-size: 22px !important; line-height: 1.25 !important; margin: 0 0 6px !important; color: var(--ink); }
.qasl-tab-card p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--text); }

/* ---------------------------------------------------------------
   Services cards & Blog cards
   --------------------------------------------------------------- */
.qasl-services { margin-top: 100px !important; padding-block: 100px; background: var(--cream) linear-gradient(115deg, transparent 49.8%, rgb(255 255 255 / .55) 50%, transparent 72%); }
.qasl-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 30px !important; }
.qasl-cards > * { margin: 0 !important; }
.qasl-card { position: relative; min-height: 370px; background: #fff; border-radius: var(--r) 0 var(--r) var(--r); padding: 40px 60px 0 40px !important; display: flex !important; flex-direction: column; justify-content: space-between; overflow: hidden; transition: all 0.3s ease; }
.qasl-card h3 a { transition: color 0.3s ease; }
.qasl-card__excerpt, .qasl-card__list li { transition: color 0.3s ease; }
@property --qasl-card-fill {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
}
.qasl-card {
        --qasl-card-fill: 0px;
        background: radial-gradient(circle at top right, var(--blue) 0, var(--blue) var(--qasl-card-fill), #fff calc(var(--qasl-card-fill) + 1px));
        transition: all .3s ease, --qasl-card-fill .7s var(--ease);
}
.qasl-card:hover { --qasl-card-fill: 100vmax; transition: all .3s ease, --qasl-card-fill 1.1s var(--ease); }
.qasl-card:hover h3 a { color: #fff; }
.qasl-card:hover .qasl-card__excerpt, .qasl-card:hover .qasl-card__list li { color: rgb(255 255 255 / .92); }
.qasl-card > * { margin: 0 !important; }
.qasl-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: 0; max-width: 260px; }
.qasl-card h3 a { color: var(--ink); text-decoration: none; }
.qasl-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.qasl-card__list { list-style: none !important; padding: 0 !important; margin: 16px 0 12px !important; display: grid; gap: 8px; }
.qasl-card__list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.4; color: var(--text); }
.qasl-card__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue) no-repeat center / 9px var(--icon-check); }
.qasl-card__excerpt { margin: 14px 0 12px !important; font-size: 15px; line-height: 1.6; color: var(--text); }
.qasl-card .wp-block-image { margin: 0 -60px 0 -40px !important; }
.qasl-card .wp-block-image img { display: block; height: 200px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; transition: transform .6s var(--ease); }
.qasl-card:hover .wp-block-image img { transform: scale(1.05); transform-origin: left bottom; }
/* Home services cards: centre every icon on a shared bottom baseline so
   the six line up. Only the icon moves; the card keeps its size. The
   services-page cards are not scoped here, so they are untouched. */
.qasl-services .qasl-card .wp-block-image img { object-position: center bottom; }
.qasl-services .qasl-card:hover .wp-block-image img { transform-origin: center bottom; }
.qasl-card::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 80px; height: 80px; background: var(--cream); border-bottom-left-radius: 30px; }
.qasl-card::after { content: ""; position: absolute; z-index: 2; top: 15px; right: 15px; width: 50px; height: 50px; border-radius: 50%; background: #fff no-repeat center / 16px var(--arrow); transition: background-color .3s, transform .45s var(--ease); }
.qasl-card:hover::after { background-color: #fff; background-image: var(--arrow); transform: rotate(45deg); }

/* ---------------------------------------------------------------
   Partners / Leadership Spotlight (About Us Page)
   --------------------------------------------------------------- */
.qasl-partners__grid { gap: 30px !important; }
.qasl-partner-card { background: #fff; border-radius: 16px; padding: 40px 44px !important; border: 1px solid #E5E2DA; box-shadow: 0 4px 16px rgb(15 37 55 / .04); }
.qasl-partner-card__body { min-width: 0; }
.qasl-partner-card__role { display: inline-block; margin: 0 0 12px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.6; letter-spacing: 0; color: var(--blue) !important; }
.qasl-partner-card__name { margin: 0 0 16px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0; color: var(--ink); }
.qasl-partner-card p { margin: 0 0 14px !important; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--text); }
.qasl-partner-card__body p:last-child { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------
   Google Map Card (Contact Us Page)
   --------------------------------------------------------------- */
.qasl-map-card { background: #fff; padding: 18px; border-radius: var(--r); box-shadow: 0 18px 40px rgb(0 0 0 / .06); overflow: hidden; }
.qasl-map-card iframe { border-radius: 20px; display: block; width: 100%; }

/* ---------------------------------------------------------------
   Architectural Bento Hero (Inner Pages & Service Detail Pages)
   --------------------------------------------------------------- */
.qasl-bento-hero { display: grid !important; grid-template-columns: 1.35fr .85fr; gap: 10px; padding: 10px 10px 0; min-height: 620px; }
.qasl-bento-hero > * { margin: 0 !important; }
.qasl-bento-hero__main { background: var(--cream) linear-gradient(125deg, transparent 52%, rgb(255 255 255 / .55) 52.2%, transparent 78%); border-radius: var(--r); padding: 65px !important; display: flex !important; flex-direction: column; justify-content: center; position: relative; }
.qasl-breadcrumb { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 18px !important; padding: 7px 18px; background: #fff; border-radius: 30px; font-size: 13px !important; font-weight: 600 !important; color: var(--light) !important; width: max-content; box-shadow: 0 4px 14px rgb(0 0 0 / .03); }
.qasl-breadcrumb a { color: var(--ink); text-decoration: none; transition: color .2s; }
.qasl-breadcrumb a:hover { color: var(--blue); }
.qasl-bento-hero__main h1 { font-size: 56px !important; line-height: 1.07 !important; letter-spacing: -2px; margin: 0 !important; max-width: 680px; color: var(--ink); }
.qasl-bento-hero__sub { margin: 20px 0 0 !important; font-size: 19px !important; line-height: 1.55 !important; font-weight: 400; color: var(--text) !important; max-width: 620px; }
.qasl-bento-hero__chips { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 26px 0 0 !important; }
.qasl-bento-hero__chip { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 16px 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 30px; font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important; }
.qasl-bento-hero__chip::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) no-repeat center / 11px var(--icon-check); flex: none; }
.qasl-bento-hero__main .wp-block-buttons { margin-top: 28px !important; }

.qasl-bento-hero__visual { position: relative; border-radius: var(--r); overflow: hidden; background: linear-gradient(145deg, #0f2537 0%, #1d4e73 55%, #3194CC 100%); padding: 36px !important; display: flex !important; flex-direction: column; justify-content: space-between; min-height: 580px; }
.qasl-bento-hero__visual--photo { background: #7FA8CE url("assets/img/2025/11/view-dubai-skyline-including-burj-khalifa-worlds-tallest-skyscraper-as-seen-from-busine-scaled.png") center 30% / cover no-repeat; }
.qasl-bento-hero__visual--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 37 55 / .22) 0%, transparent 45%, rgb(15 37 55 / .65) 100%); z-index: 1; }
.qasl-bento-hero__visual--photo2 { background: #15222e url("assets/img/2025/11/about-us-2nd-2048x2048.jpg") center / cover no-repeat; }
.qasl-bento-hero__visual--photo2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 37 55 / .3) 0%, rgb(15 37 55 / .82) 100%); z-index: 1; }
.qasl-bento-hero__visual > * { position: relative; z-index: 2; margin: 0 !important; }
.qasl-bento-hero__badge { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 30px; background: rgb(255 255 255 / .14); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .25); color: #fff !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .5px; text-transform: uppercase; width: max-content; }
.qasl-bento-hero__art { margin: auto !important; padding: 16px 0 !important; display: flex !important; justify-content: center; align-items: center; }
.qasl-bento-hero__art img { height: 210px !important; width: auto !important; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .28)); transition: transform .5s var(--ease); }
.qasl-bento-hero__visual:hover .qasl-bento-hero__art img { transform: translateY(-6px) scale(1.04); }
.qasl-bento-hero__stat { background: #fff; border-radius: 24px 0 24px 24px; padding: 24px 28px !important; position: relative; box-shadow: 0 18px 40px rgb(0 0 0 / .16); }
.qasl-bento-hero__stat::before { content: ""; position: absolute; top: 0; right: 0; width: 52px; height: 52px; background: var(--blue); border-bottom-left-radius: 20px; }
.qasl-bento-hero__stat::after { content: ""; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; background: no-repeat center / 14px var(--arrow-w); }
.qasl-bento-hero__stat-num { margin: 0 !important; font-size: 40px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -1.5px; color: var(--blue) !important; }
.qasl-bento-hero__stat-label { margin: 6px 0 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--ink) !important; max-width: 290px; }

/* Keep all page heroes clear of the approved transparent navbar fade. */
@media (min-width: 1081px) {
        .qasl-hero,
        .qasl-bento-hero {
		margin-top: 112px !important;
	}
}
@media (max-width: 1080px) {
        .qasl-hero,
        .qasl-bento-hero {
		margin-top: 80px !important;
	}
        .qasl-hero .qasl-hero__panel,
        .qasl-bento-hero .qasl-bento-hero__main {
		padding-top: 44px !important;
	}
}

.qasl-service-hero .qasl-bento-hero__visual,
.qasl-service-hub .qasl-bento-hero__visual { background: #1d4e73; }
/* Approved backgrounds for internal-page hero panels. */
body[class*="qasl-hero-bg-"] .qasl-bento-hero__art { display: none !important; }
body.qasl-hero-bg-about .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .16), rgb(12 42 66 / .32)), url("assets/img/hero-backgrounds/about-cityscape.jpg") center / cover no-repeat; }
body.qasl-hero-bg-about .qasl-about__photo { background: url("assets/img/hero-backgrounds/about-story.jpg") center / cover no-repeat; }
body.qasl-hero-bg-contact .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .12), rgb(12 42 66 / .25)), url("assets/img/hero-backgrounds/contact-new.jpg") center / cover no-repeat; }
body.qasl-hero-bg-about .qasl-bento-hero__visual--photo::before,
body.qasl-hero-bg-contact .qasl-bento-hero__visual--photo::before { display: none; }
body.qasl-hero-bg-hub .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .28), rgb(12 42 66 / .40)), url("assets/img/2025/11/services-overview-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-bookkeeping .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/2025/11/accounting-bookkeeping-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-management .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/2025/11/management-accounting-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-vat-registration .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/hero-backgrounds/corporate_tax.jpg") center / cover no-repeat; }
body.qasl-hero-bg-vat-accounting .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/2025/11/vat-accounting-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-vat-consultants .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/hero-backgrounds/valuation.jpg") center / cover no-repeat; }
body.qasl-hero-bg-corporate-tax .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/2025/11/corporate-tax-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-valuation .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/2025/11/business-valuation-background.jpg") center / cover no-repeat; }
body.qasl-hero-bg-advisory .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/hero-backgrounds/contact-new.jpg") center / cover no-repeat; }
body.qasl-hero-bg-blog .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), url("assets/img/hero-backgrounds/blog.jpg") center 28% / cover no-repeat; }
body.qasl-hero-bg-article .qasl-bento-hero__visual { background: linear-gradient(rgb(12 42 66 / .46), rgb(12 42 66 / .56)), var(--qasl-article-image, url("assets/img/hero-backgrounds/article.jpg")) center 28% / cover no-repeat; }
/* Topic-specific backgrounds for the six existing articles. */
body.qasl-hero-bg-article.postid-27 { --qasl-article-image: url("assets/img/2025/11/blog-tax-consultancy.jpg"); }
body.qasl-hero-bg-article.postid-28 { --qasl-article-image: url("assets/img/2025/11/blog-corporate-valuation.jpg"); }
body.qasl-hero-bg-article.postid-29 { --qasl-article-image: url("assets/img/2025/11/blog-bookkeeping-records.jpg"); }
body.qasl-hero-bg-article.postid-30 { --qasl-article-image: url("assets/img/2025/11/blog-accounting-firm.jpg"); }
body.qasl-hero-bg-article.postid-31 { --qasl-article-image: url("assets/img/2025/11/blog-accounting-terms.jpg"); }
body.qasl-hero-bg-article.postid-32 { --qasl-article-image: url("assets/img/2025/11/blog-outsourced-accounting.jpg"); }
.qasl-label--static {
	width: max-content;
	min-width: 0;
	overflow: visible;
	padding-inline: 14px;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---------------------------------------------------------------
   About Us statistics
   --------------------------------------------------------------- */
.qasl-stat-strip { margin-top: 100px !important; }
.qasl-stat-strip__intro { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px !important; }
.qasl-stat-strip__intro-copy { margin: 0 !important; }
.qasl-section .qasl-stat-strip__intro h2 { max-width: 580px; margin: 0 !important; color: #142b3c; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.13 !important; letter-spacing: -.035em !important; }
.qasl-stat-strip__note { max-width: 300px; margin: 0 0 3px !important; color: #59646a !important; font-size: 15px !important; line-height: 1.65 !important; }
.qasl-stat-strip__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; padding: 42px 12px !important; background: var(--cream); border-radius: 24px; }
.qasl-stat-strip__grid > * { margin: 0 !important; }
.qasl-stat-card { min-width: 0; padding: 0 29px !important; }
.qasl-stat-card + .qasl-stat-card { border-left: 1px solid var(--line); }
.qasl-stat-card__num { margin: 0 0 15px !important; color: var(--blue) !important; font-size: clamp(42px, 4vw, 58px) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -.055em; }
.qasl-stat-card__title { margin: 0 0 10px !important; color: #142b3c !important; font-size: 17px !important; line-height: 1.3 !important; letter-spacing: -.015em; }
.qasl-stat-card__desc { margin: 0 !important; color: #59646a !important; font-size: 14px !important; line-height: 1.65 !important; }

/* ---------------------------------------------------------------
   8-Industry Interactive Bento Grid (.qasl-industry-grid)
   --------------------------------------------------------------- */
.qasl-industry-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px !important; margin-top: 40px !important; counter-reset: qasl-industry; }
.qasl-industry-grid > * { margin: 0 !important; }
@property --qasl-industry-fill { syntax: "<length>"; inherits: false; initial-value: 0px; }
.qasl-industry-card { --qasl-industry-fill: 0px; position: relative; min-width: 0; min-height: 260px; counter-increment: qasl-industry; overflow: hidden; border-radius: var(--r) 0 var(--r) var(--r); padding: 38px 28px 34px !important; background: #fff; background: radial-gradient(circle at top right, var(--blue) 0, var(--blue) var(--qasl-industry-fill), #fff calc(var(--qasl-industry-fill) + 1px)); transition: --qasl-industry-fill .7s var(--ease); }
.qasl-industry-card::before { content: ""; position: absolute; top: 0; right: 0; width: 58px; height: 58px; background: var(--cream); border-bottom-left-radius: 24px; }
.qasl-industry-card::after { content: counter(qasl-industry); position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.qasl-industry-card:hover { --qasl-industry-fill: 100vmax; transition: --qasl-industry-fill 1.1s var(--ease); }
.qasl-industry-card h3 { max-width: 215px; margin: 0 24px 10px 0 !important; font-size: 22px !important; line-height: 1.25 !important; color: var(--ink); transition: color .3s ease; }
.qasl-industry-card p { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--text); transition: color .3s ease; }
.qasl-industry-card:hover h3 { color: #fff; }
.qasl-industry-card:hover p { color: rgb(255 255 255 / .92); }
@media (prefers-reduced-motion: reduce) { .qasl-industry-card, .qasl-industry-card:hover, .qasl-industry-card h3, .qasl-industry-card p { transition: none; } }

/* ---------------------------------------------------------------
   4-Step Process Timeline (.qasl-process)
   --------------------------------------------------------------- */
.qasl-process { padding-block: 90px; }
.qasl-process__grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px !important; }
.qasl-process__grid > * { margin: 0 !important; }
.qasl-process-card { position: relative; background: var(--cream); border-radius: var(--r); padding: 36px 28px !important; border: 1px solid transparent; transition: transform .3s var(--ease), background-color .3s, border-color .3s, box-shadow .3s; }
.qasl-process-card:hover { transform: translateY(-6px); background: #fff; border-color: var(--blue); box-shadow: 0 18px 40px rgb(0 0 0 / .06); }
.qasl-process-card__step { display: inline-block; margin: 0 0 16px !important; padding: 6px 14px; border-radius: 20px; background: var(--blue); color: #fff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .6px; text-transform: uppercase; }
.qasl-process-card h3 { margin: 0 0 12px !important; font-size: 22px !important; line-height: 1.25 !important; color: var(--ink); }
.qasl-process-card p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.55 !important; color: var(--text); }
.qasl-process-card .qasl-process-card__step { margin-bottom: 16px !important; }

/* ---------------------------------------------------------------
   Service Detail & Single Blog Post 2-Column Layout (.qasl-service-layout)
   --------------------------------------------------------------- */
.qasl-service-sec { padding-block: 80px 40px; }
.qasl-service-layout { display: grid !important; grid-template-columns: minmax(0, 1.85fr) minmax(320px, .95fr); gap: 40px !important; align-items: start !important; }
.qasl-service-layout > * { margin: 0 !important; min-width: 0; }
.qasl-service-main { display: grid !important; gap: 36px !important; }
.qasl-service-main > * { margin: 0 !important; }

.qasl-prose-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 44px 48px !important; box-shadow: 0 12px 32px rgb(0 0 0 / .03); }
.qasl-prose-card h2 { font-size: 36px !important; line-height: 1.15 !important; letter-spacing: -1px; margin: 0 0 18px !important; color: var(--ink); }
.qasl-prose-card h3 { font-size: 24px !important; line-height: 1.25 !important; margin: 28px 0 12px !important; color: var(--ink); }
.qasl-prose-card p { font-size: 17px !important; line-height: 1.68 !important; color: var(--text); margin: 0 0 16px !important; }
.qasl-prose-card p:last-child { margin-bottom: 0 !important; }

.qasl-deliverables-box { background: var(--cream); border-radius: var(--r); padding: 44px 48px !important; }
.qasl-deliverables-box h2 { font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -1px; margin: 0 0 10px !important; color: var(--ink); }
.qasl-deliverables-box > p { margin: 0 0 24px !important; font-size: 16.5px !important; color: var(--text); }
.qasl-check-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px !important; }
.qasl-check-grid > * { margin: 0 !important; }
.qasl-check-item { position: relative; background: #fff; border-radius: 20px; padding: 16px 20px 16px 52px !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--ink) !important; border: 1px solid transparent; transition: border-color .25s, transform .25s; }
.qasl-check-item:hover { border-color: var(--blue); transform: translateX(4px); }
.qasl-check-item::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--blue) no-repeat center / 12px var(--icon-check); }

.qasl-benefits-box h2 { font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -1px; margin: 0 0 24px !important; color: var(--ink); }
.qasl-benefits-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px !important; }
.qasl-benefits-grid > * { margin: 0 !important; }
.qasl-benefit-card { background: var(--cream); border-radius: 26px; padding: 32px 28px !important; border: 1px solid transparent; transition: transform .3s var(--ease), background-color .3s, border-color .3s, box-shadow .3s; }
.qasl-benefit-card:hover { transform: translateY(-4px); background: #fff; border-color: var(--blue); box-shadow: 0 14px 32px rgb(0 0 0 / .06); }
.qasl-benefit-card__num { display: inline-block; margin: 0 0 12px !important; font-size: 38px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -1.5px; color: var(--blue) !important; }
.qasl-benefit-card h3 { margin: 0 0 10px !important; font-size: 21px !important; line-height: 1.25 !important; color: var(--ink); }
.qasl-benefit-card p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.58 !important; color: var(--text); }

/* Interactive FAQ Accordion (.qasl-faq) */
.qasl-faq { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 44px 48px !important; }
.qasl-faq h2 { font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -1px; margin: 0 0 24px !important; color: var(--ink); }
.qasl-faq-item { border-bottom: 1px solid var(--line); padding: 20px 0 !important; margin: 0 !important; }
.qasl-faq-item:last-child { border-bottom: 0; padding-bottom: 0 !important; }
.qasl-faq-item h3 { position: relative; margin: 0 !important; padding-right: 48px !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--ink); cursor: pointer; transition: color .2s; }
.qasl-faq-item h3:hover { color: var(--blue); }
.qasl-faq-item h3::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 500; transition: background-color .25s, color .25s, transform .25s; }
.qasl-faq-item.is-open h3 { color: var(--blue); }
.qasl-faq-item.is-open h3::after { content: "−"; background: var(--blue); color: #fff; }
.qasl-faq-item p { margin: 12px 0 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--text); }
.js body:not(.block-editor-page) .qasl-faq-item:not(.is-open):not(.editor-styles-wrapper *) p { display: none; }

/* Sticky Service Sidebar (.qasl-service-sidebar) */
.qasl-service-sidebar { position: sticky; top: 30px; display: grid !important; gap: 28px !important; }
.qasl-service-sidebar > * { margin: 0 !important; }
.qasl-sidebar-nav { background: var(--cream); border-radius: var(--r); padding: 34px 30px !important; }
.qasl-sidebar-nav h3 { margin: 0 0 18px !important; font-size: 22px !important; line-height: 1.2 !important; color: var(--ink); }
.qasl-sidebar-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; gap: 10px !important; }
.qasl-sidebar-links li { margin: 0 !important; }
.qasl-sidebar-links a { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 18px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.qasl-sidebar-links a::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--cream) no-repeat center / 12px var(--arrow); transition: background-color .25s, transform .3s; flex: none; }
.qasl-sidebar-links a:hover { border-color: var(--blue); color: var(--blue); transform: translateX(4px); }
.qasl-sidebar-links li.is-active a { background: var(--blue); color: #fff; }
.qasl-sidebar-links li.is-active a::after { background-color: #fff; }

.qasl-sidebar-cta { background: linear-gradient(145deg, #102436 0%, #1c4466 100%); border-radius: var(--r); padding: 38px 32px !important; color: #fff; position: relative; overflow: hidden; }
.qasl-sidebar-cta h3 { margin: 0 0 12px !important; font-size: 26px !important; line-height: 1.2 !important; color: #fff !important; }
.qasl-sidebar-cta p { margin: 0 0 18px !important; font-size: 15.5px !important; line-height: 1.55 !important; color: rgb(255 255 255 / .82) !important; }
.qasl-sidebar-cta__contact { margin: 0 0 10px !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.qasl-sidebar-cta__contact a { color: #fff !important; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 5px; }
.qasl-sidebar-cta .wp-block-buttons { margin-top: 22px !important; }

/* ---------------------------------------------------------------
   Startup Comparison Cards & Direct Contact Action Cards
   --------------------------------------------------------------- */
.qasl-compare { padding-block: 80px; }
.qasl-compare__grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 30px !important; }
.qasl-compare__grid > * { margin: 0 !important; }
.qasl-compare-card { background: var(--cream); border-radius: var(--r); padding: 44px 40px !important; border: 1px solid var(--line); }
.qasl-compare-card--highlight { background: #fff; border: 2px solid var(--blue); box-shadow: 0 20px 50px rgb(49 148 204 / .12); position: relative; }
.qasl-compare-card__tag { display: inline-block; margin: 0 0 12px !important; padding: 6px 16px; border-radius: 20px; background: var(--line); font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .5px; color: var(--ink) !important; }
.qasl-compare-card--highlight .qasl-compare-card__tag { background: var(--blue); color: #fff !important; }
.qasl-compare-card h3 { margin: 0 0 10px !important; font-size: 28px !important; line-height: 1.2 !important; color: var(--ink); }
.qasl-compare-card > p { margin: 0 0 22px !important; font-size: 16px !important; color: var(--text); }

.qasl-contact-cards { margin-top: 50px !important; padding-bottom: 70px !important; }
.qasl-contact-cards__grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px !important; }
.qasl-contact-cards__grid > * { margin: 0 !important; }
@property --qasl-contact-fill { syntax: "<length>"; inherits: false; initial-value: 0px; }
.qasl-contact-card { --qasl-contact-fill: 0px; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--cream); background: radial-gradient(circle at top right, var(--blue) 0, var(--blue) var(--qasl-contact-fill), var(--cream) calc(var(--qasl-contact-fill) + 1px)); border-radius: var(--r) 0 var(--r) var(--r); padding: 30px 34px !important; transition: --qasl-contact-fill .7s var(--ease); }
.qasl-contact-card::before { content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; background: #fff; border-bottom-left-radius: 24px; }
.qasl-contact-card::after { content: ""; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--blue) no-repeat center / 18px var(--icon-phone); }
.qasl-contact-card--mail::after { background-image: var(--icon-mail); }
.qasl-contact-card--pin::after { background-image: var(--icon-pin); }
.qasl-contact-card:hover, .qasl-contact-card:focus-within { --qasl-contact-fill: 100vmax; transition: --qasl-contact-fill 1.1s var(--ease); }
.qasl-contact-card__tag { display: inline-block; max-width: calc(100% - 35px); margin: 0 0 12px !important; padding: 5px 14px; border-radius: 20px; background: #fff; border: .8px solid var(--blue); font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; color: var(--blue) !important; }
.qasl-contact-card h3 { max-width: calc(100% - 36px); margin: 0 0 12px !important; font-size: 24px !important; line-height: 1.25 !important; overflow-wrap: anywhere; color: var(--ink); transition: color .3s ease; }
.qasl-contact-card p { margin: 0 0 8px !important; font-size: 16.5px !important; line-height: 1.55 !important; color: var(--text); transition: color .3s ease; }
.qasl-contact-card p a { color: var(--ink); font-weight: 700; text-decoration: none; transition: color .3s ease; }
.qasl-contact-card:hover h3, .qasl-contact-card:focus-within h3, .qasl-contact-card:hover p:not(.qasl-contact-card__tag), .qasl-contact-card:focus-within p:not(.qasl-contact-card__tag), .qasl-contact-card:hover p a, .qasl-contact-card:focus-within p a { color: #fff; }
.qasl-contact-card p a:hover { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .qasl-contact-card, .qasl-contact-card:hover, .qasl-contact-card:focus-within, .qasl-contact-card h3, .qasl-contact-card p, .qasl-contact-card a { transition: none; } }
@media (max-width: 600px) { .qasl-contact-card { padding: 30px 24px !important; } }

.qasl-card__badge { display: inline-block; width: max-content; margin: 0 0 12px !important; padding: 5px 14px; border-radius: 20px; background: var(--cream); border: .8px solid var(--blue); font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .4px; color: var(--blue) !important; }

/* ---------------------------------------------------------------
   Expertise pills
   --------------------------------------------------------------- */
.qasl-expertise { padding-block: 100px 50px; }
.qasl-pills { margin-inline: auto; max-width: var(--wrap); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.qasl-pills + .qasl-pills { margin-top: 10px; }
.qasl-pills .qasl-ticker__track { animation-duration: 45s; }
.qasl-pill { display: inline-flex !important; align-items: center; gap: 15px; height: 82px; margin: 0 30px 0 0 !important; padding: 8px 40px 8px 8px !important; border: 1px solid var(--line); border-radius: 60px; background: #fff; white-space: nowrap; font-family: var(--wp--preset--font-family--switzer); font-weight: 600; font-size: 26px !important; color: var(--ink) !important; }
.qasl-pill::before { content: ""; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--blue) no-repeat center / 22px var(--icon-check); }
.qasl-pill .qasl-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; padding: 21px; }

/* ---------------------------------------------------------------
   Startups band
   --------------------------------------------------------------- */
.qasl-startups { margin-top: 50px !important; padding-block: 80px; background: var(--cream); }
.qasl-startups__grid { gap: 140px !important; }
.qasl-startups__photo { margin: 0 !important; }
.qasl-startups__photo img { width: 100%; max-width: 419px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); display: block; }
.qasl-startups h2 { font-size: 60px !important; line-height: 60px !important; max-width: 620px; }
.qasl-startups__text { margin: 22px 0 0 !important; font-size: 18px; line-height: 1.45; color: var(--text); max-width: 700px; }
.qasl-startups .wp-block-buttons { margin-top: 20px !important; }

/* ---------------------------------------------------------------
   Five Cornerstones / Four Pillars (5-column & 4-column adaptive grid)
   --------------------------------------------------------------- */
.qasl-reasons { padding-block: 90px; }
.qasl-reasons .qasl-head h2 { max-width: 620px; }
.qasl-reasons__grid { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 24px !important; }
.qasl-reasons__grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
.qasl-reasons__grid > * { margin: 0 !important; }
.qasl-reason { background: var(--cream); border-radius: var(--r); padding: 32px 24px !important; transition: transform .3s var(--ease), background-color .3s, box-shadow .3s; border: 1px solid transparent; }
.qasl-reason:hover { transform: translateY(-6px); background: #fff; border-color: var(--blue); box-shadow: 0 18px 40px rgb(0 0 0 / .06); }
.qasl-reason > * { margin: 0 !important; }
.qasl-reason__num { height: 64px; overflow: hidden; border-bottom: 1px solid var(--line); font-size: 100px !important; font-weight: 700; line-height: 76px !important; letter-spacing: -4px; color: var(--blue); }
.qasl-reason h3 { margin-top: 24px !important; font-size: 22px; line-height: 26px; }
.qasl-reason__img { margin: 28px 0 !important; height: 110px; display: flex; align-items: center; justify-content: center; }
.qasl-reason__img img { height: 110px; width: auto; object-fit: contain; }
.qasl-reason__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 1px solid #E5E2DA; color: var(--blue); transition: background-color .3s, color .3s, border-color .3s; }
.qasl-reason__icon svg { width: 40px; height: 40px; }
.qasl-reason:hover .qasl-reason__icon { background: var(--blue); color: #fff; border-color: var(--blue); }
.qasl-reason p { font-size: 15px; line-height: 23px; margin-top: 12px !important; }

/* ---------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------- */
.qasl-testimonials { position: relative; margin-top: 150px !important; padding: 160px 0 90px; background: var(--cream); }
.qasl-testimonials::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(400px, 100%); height: 132px; transform: translateX(-50%); background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 132' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 C70 0 75 132 200 132 C325 132 330 0 400 0 Z'/%3E%3C/svg%3E"); pointer-events: none; }
.qasl-badge { position: absolute; left: 50%; top: -122px; width: 240px !important; height: 240px !important; transform: translateX(-50%); z-index: 2; margin: 0 !important; }
.qasl-badge::before { content: ""; position: absolute; inset: 0; width: 240px; height: 240px; background: no-repeat center / 100% 100% var(--badge-ring); animation: qaslSpin 18s linear infinite; pointer-events: none; z-index: 1; }
/* People overlay removed: the brand Q icon now sits in the centre. */
.qasl-badge::after { content: none; display: none; }
.qasl-badge__img { position: absolute; left: 33px; top: 33px; width: 174px !important; height: 174px !important; border-radius: 50%; background: #fff; object-fit: contain; margin: 0 !important; z-index: 2; box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
.qasl-badge__img img { width: 174px !important; height: 174px !important; border-radius: 50%; object-fit: contain; padding: 30px; display: block; }
.qasl-quotes { overflow: hidden; }
.qasl-quotes__track { display: flex !important; gap: 30px !important; width: max-content; animation: qaslTicker 40s linear infinite; }
.qasl-quotes:hover .qasl-quotes__track { animation-play-state: paused; }
.qasl-quote { flex: none; width: 410px; min-height: 240px; margin: 0 !important; padding: 50px 40px !important; background: #fff; border-radius: var(--r); display: flex !important; flex-direction: column; justify-content: space-between; gap: 30px; }
.qasl-quote blockquote, .qasl-quote__text { margin: 0 !important; padding: 0; border: 0; font-size: 20px !important; line-height: 1.45 !important; color: var(--text) !important; }
.qasl-quote figcaption, .qasl-quote__author { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important; }

/* ---------------------------------------------------------------
   Contact / quick enquiry
   --------------------------------------------------------------- */
.qasl-contact { padding-block: 100px; background: linear-gradient(var(--cream), #fff 45%); border-radius: 0 0 var(--r) var(--r); }
.qasl-contact__grid { gap: 90px !important; }
.qasl-contact h2 { font-size: 54px !important; line-height: 60px !important; max-width: 580px; }
.qasl-contact__items { display: grid !important; gap: 18px !important; margin-top: 26px !important; }
.qasl-contact__item { position: relative; padding-left: 60px !important; margin: 0 !important; }
.qasl-contact__item::before { content: ""; position: absolute; left: 0; top: 2px; width: 46px; height: 46px; border-radius: 50%; background: var(--blue) no-repeat center / 20px var(--icon-phone); }
.qasl-contact__item--mail::before { background-image: var(--icon-mail); }
.qasl-contact__item--pin::before { background-image: var(--icon-pin); }
.qasl-contact__label { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--light) !important; line-height: 1.3 !important; }
.qasl-contact__val { margin: 2px 0 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.6 !important; }
.qasl-contact__val a { color: var(--ink); text-decoration: none; }
.qasl-contact__val a:hover { color: var(--blue); }
.qasl-contact__intro { margin: 0 0 30px !important; font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--ink); }

.qasl-form { display: grid; gap: 20px; }
.qasl-form *, .qasl-form *::before, .qasl-form *::after { box-sizing: border-box; }
.qasl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.qasl-form label { display: block; min-width: 0; }
.qasl-form input, .qasl-form select, .qasl-form textarea { width: 100%; height: 60px; padding: 15px 30px; border: .8px solid var(--field); border-radius: var(--r); background: var(--field); font: inherit; font-size: 16px; color: var(--ink); transition: border-color .25s, background-color .25s; appearance: none; }
.qasl-form select { background: var(--field) no-repeat right 26px center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); color: var(--text); }
.qasl-form textarea { height: 220px; resize: vertical; }
.qasl-form ::placeholder { color: var(--text); opacity: 1; }
.qasl-form input:focus, .qasl-form select:focus, .qasl-form textarea:focus { outline: none; border-color: var(--blue); background-color: #fff; }
.qasl-form__foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.qasl-form__foot p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--text); }
.qasl-form button { cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; border: .8px solid var(--blue); }
.qasl-hp { position: absolute; left: -9999px; }
.qasl-form__msg { border-radius: 16px; padding: 14px 20px; margin: 0 0 20px; font-weight: 600; }
.qasl-form__msg.is-ok { background: #E6F4EA; color: #145C2B; }
.qasl-form__msg.is-err { background: #FDECEC; color: #8A1C1C; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.qasl-footer { position: relative; margin-top: -30px !important; padding: 140px 10px 10px !important; background: #1d2328 url("assets/img/2025/11/last-footer-scaled.jpg") center / cover no-repeat; overflow: hidden; }
.qasl-footer::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .62); }
.qasl-footer > * { position: relative; z-index: 1; }
.qasl-footer__title { margin: 0 auto !important; max-width: 580px; text-align: center; color: #fff !important; font-size: 70px !important; line-height: 70px !important; letter-spacing: -2px; }
.qasl-footer__sub { margin: 24px auto 0 !important; max-width: 520px; text-align: center; color: #fff; font-size: 18px; line-height: 1.45; }
.qasl-footer__stage { position: relative; margin-top: 30px !important; text-align: center; display: flex; flex-direction: column; align-items: center; }
.qasl-footer__giant { margin: 0 !important; font-size: clamp(120px, 21vw, 330px) !important; font-weight: 700; line-height: .8 !important; letter-spacing: -.04em; white-space: nowrap; background: linear-gradient(#fff 20%, rgb(255 255 255 / 0) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.qasl-footer__cta { position: absolute; z-index: 2; left: 50%; top: -20px; transform: translateX(-50%); margin: 0 !important; width: 160px !important; height: 160px !important; display: flex !important; justify-content: center; align-items: center; }
.qasl-footer__cta a { box-sizing: border-box !important; flex: none !important; width: 160px !important; height: 160px !important; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 22px; background: rgb(110 110 110 / .9); color: #fff; font-weight: 700; font-size: 20px; line-height: 1.2; text-decoration: none; transition: background-color .35s, transform .45s var(--ease); }
.qasl-footer__cta a:hover { background: var(--blue); transform: scale(1.05); }
.qasl-footer__card { margin: 0 !important; background: #fff; border-radius: var(--r); padding: 60px 80px 30px !important; }
.qasl-footer__cols { gap: 60px !important; }
.qasl-footer__cols > .wp-block-column + .wp-block-column { border-left: 1px solid var(--line); padding-left: 40px; }
.qasl-footer__card p { font-size: 18px; line-height: 1.55; color: var(--text); }
.qasl-footer__logo img { width: 166px; height: auto; }
.qasl-footer__links { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
.qasl-footer__links a { font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; }
.qasl-footer__links a:hover { color: var(--blue); }
.qasl-footer__contact a { display: inline-block; margin-bottom: 8px; font-size: 20px; font-weight: 700; color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 6px; }
.qasl-footer__social { margin-top: 34px !important; font-size: 16px !important; color: var(--light) !important; }
.qasl-footer__social a { color: var(--light); text-decoration: none; }
.qasl-footer__social a:hover { color: var(--blue); }
.qasl-footer__bottom { margin: 50px 0 0 !important; padding-top: 30px; border-top: 1px solid var(--line); text-align: center; font-size: 16px !important; color: var(--light) !important; }

/* ---------------------------------------------------------------
   Floating buttons
   --------------------------------------------------------------- */
.qasl-float { position: fixed; left: 28px; bottom: 28px; z-index: 70; display: grid; gap: 12px; }
.qasl-float a, .qasl-float button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 0; padding: 0; cursor: pointer; box-shadow: 0 6px 16px rgb(0 0 0 / .18); transition: transform .3s var(--ease), opacity .3s; }
.qasl-float svg { width: 26px; height: 26px; }
.qasl-float__wa { background: #25D366; }
.qasl-float__call { background: #1E88E5; }
.qasl-float__toggle { background: #4F6ACA; }
.qasl-float[data-open="false"] a { opacity: 0; transform: translateY(20px) scale(.6); pointer-events: none; }
.qasl-float[data-open="false"] .qasl-float__toggle svg { transform: rotate(45deg); }
.qasl-top { position: fixed; right: 30px; bottom: 30px; z-index: 70; width: 70px; height: 70px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background-color .3s; }
.qasl-top svg { width: 26px; height: 26px; }
.qasl-top.is-visible { opacity: 1; visibility: visible; }
.qasl-top:hover { background: var(--ink); }

/* ---------------------------------------------------------------
   Tablet and mobile
   --------------------------------------------------------------- */
@media (max-width: 1360px) {
	.qasl-about__grid, .qasl-startups__grid { gap: 60px !important; }
	.qasl-about__text, .qasl-about__side { flex: 1 1 0 !important; }
	.qasl-reasons__grid, .qasl-reasons__grid--4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1024px) {
	:root { --gutter: 20px; }
	.qasl-hero, .qasl-bento-hero { grid-template-columns: 1fr !important; min-height: auto; }
	.qasl-hero__panel { order: -1; padding: 50px 30px !important; }
	.qasl-bento-hero__main { padding: 44px 34px !important; }
	.qasl-bento-hero__visual { padding: 40px 30px !important; min-height: 420px; }
	.qasl-hero__media { height: 480px; }
	.qasl-hero__panel h1, .qasl-bento-hero__main h1 { font-size: 46px !important; line-height: 50px !important; }
	.qasl-hero__ticker span, .qasl-hero__ticker .qasl-hero__ticker-item { font-size: 100px !important; }
	.qasl-cards, .qasl-stat-strip__grid, .qasl-industry-grid, .qasl-process__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.qasl-stat-strip__grid { padding: 12px 16px !important; }
	.qasl-stat-card { padding: 28px !important; }
	.qasl-stat-card:nth-child(3) { border-left: 0; }
	.qasl-stat-card:nth-child(n+3) { border-top: 1px solid var(--line); }
	.qasl-service-layout, .qasl-compare__grid, .qasl-contact-cards__grid { grid-template-columns: 1fr !important; }
	.qasl-service-sidebar { position: static; }
	.qasl-reasons__grid, .qasl-reasons__grid--4 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 30px !important; }
	.qasl-partners__grid { flex-direction: column !important; }
	.qasl-footer__cols > .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; }
	.qasl-footer__card { padding: 40px 30px 24px !important; }
}
@media (max-width: 781px) {
	.qasl-section h2, .qasl-startups h2, .qasl-contact h2 { font-size: 38px !important; line-height: 40px !important; letter-spacing: -1px; }
	.qasl-hero__panel h1, .qasl-bento-hero__main h1 { font-size: 36px !important; line-height: 40px !important; }
	.qasl-hero__sub, .qasl-bento-hero__sub { font-size: 17px !important; }
	.qasl-hero__media { height: 380px; }
	.qasl-hero__ticker { top: 110px; }
	.qasl-hero__ticker span, .qasl-hero__ticker .qasl-hero__ticker-item { font-size: 80px !important; }
        .qasl-about, .qasl-services { margin-top: 60px !important; }
	.qasl-services, .qasl-contact, .qasl-process, .qasl-compare { padding-block: 60px; }
	.qasl-cards, .qasl-reasons__grid, .qasl-reasons__grid--4, .qasl-stat-strip__grid, .qasl-industry-grid, .qasl-process__grid, .qasl-check-grid, .qasl-benefits-grid { grid-template-columns: 1fr !important; }
	.qasl-industry-card { min-height: 0; }
	.qasl-contact-cards { padding-bottom: 50px !important; }
	.qasl-contact-card { min-height: 0; }
	.qasl-stat-strip { margin-top: 60px !important; }
	.qasl-stat-strip__intro { display: block !important; margin-bottom: 26px !important; }
	.qasl-stat-strip__note { margin-top: 16px !important; }
	.qasl-stat-strip__grid { padding: 8px 24px !important; border-radius: 20px; }
	.qasl-stat-card { padding: 24px 0 !important; }
	.qasl-stat-card + .qasl-stat-card { border-left: 0; border-top: 1px solid var(--line); }
	.qasl-stat-card__num { margin-bottom: 10px !important; }
	.qasl-prose-card, .qasl-deliverables-box, .qasl-faq, .qasl-compare-card { padding: 30px 24px !important; }
	.qasl-counter { font-size: 100px; margin-top: 30px !important; }
	.qasl-about__photo { height: 300px; }
	.qasl-pill { height: 64px; font-size: 18px !important; padding-right: 26px !important; }
	.qasl-pill .qasl-icon { width: 48px; height: 48px; padding: 14px; }
	.qasl-quote { width: 300px; padding: 34px 28px; }
	.qasl-quote blockquote { font-size: 18px; }
	.qasl-partner-card { padding: 28px !important; }
	.qasl-form__row { grid-template-columns: 1fr; }
	.qasl-form textarea { height: 180px; }
	.qasl-footer__title { font-size: 44px !important; line-height: 46px !important; }
	.qasl-footer__cta a { width: 120px !important; height: 120px !important; font-size: 16px; }
	.qasl-float { left: 14px; bottom: 14px; } .qasl-float a, .qasl-float button { width: 46px; height: 46px; }
	.qasl-top { right: 14px; bottom: 14px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.js .qasl-a-up, .js .qasl-a-left, .js .qasl-a-right, .js .qasl-label { opacity: 1; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------
   Referral link generator
   --------------------------------------------------------------- */
.qasl-ref-gen { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 40px 44px; box-shadow: 0 4px 16px rgb(15 37 55 / .04); }
.qasl-ref-gen__label { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.qasl-ref-gen__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qasl-ref-gen__row + .qasl-ref-gen__label { margin-top: 28px; }
.qasl-ref-gen input { flex: 1 1 280px; min-width: 0; height: 56px; padding: 0 20px; border: 1px solid var(--line); border-radius: 30px; background: var(--field); font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color .25s, background-color .25s; }
.qasl-ref-gen input:focus { outline: none; border-color: var(--blue); background: #fff; }
.qasl-ref-gen__out { font-weight: 600; }
.qasl-ref-gen button { flex: none; height: 56px; padding: 0 30px; border: 0; border-radius: 30px; background: var(--blue); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .3s ease, transform .3s ease; }
.qasl-ref-gen button:hover { background: var(--ink); }
.qasl-ref-gen__copy { background: var(--blue) !important; }
.qasl-ref-gen__copy:hover { background: var(--ink) !important; }
.qasl-ref-gen__hint { margin: 10px 0 0 !important; font-size: 15px; line-height: 1.6; color: var(--light); }
.qasl-ref-gen__status { margin: 14px 0 0 !important; min-height: 22px; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--blue); }
@media (max-width: 781px) {
	.qasl-ref-gen { padding: 28px 24px; }
	.qasl-ref-gen button { width: 100%; }
}

/* ---------------------------------------------------------------
   Blog Query Loop (native post grid)
   --------------------------------------------------------------- */
.qasl-blog-query { margin: 0 !important; }
.qasl-blog-query .qasl-cards { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.qasl-blog-query .qasl-cards > li { margin: 0 !important; display: flex; }
.qasl-blog-query .qasl-cards > li > .qasl-card { width: 100%; min-height: 0; justify-content: flex-start; gap: 24px; padding-bottom: 32px !important; }
.qasl-blog-query .qasl-card__badge:has(> a:only-child[href*="/category/uncategorized/"]) { display: none; }
.qasl-blog-query .qasl-card .wp-block-post-excerpt { margin: 0 !important; }
.qasl-card .wp-block-post-title { font-size: 22px; line-height: 1.25; letter-spacing: 0; max-width: 260px; margin: 0 !important; }
.qasl-card .wp-block-post-title a { color: var(--ink); text-decoration: none; transition: color 0.3s ease; }
.qasl-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.qasl-card:hover .wp-block-post-title a { color: #fff; }
.qasl-card .wp-block-post-excerpt { margin: 14px 0 12px !important; }
.qasl-card .wp-block-post-excerpt p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--text); transition: color 0.3s ease; }
.qasl-card:hover .wp-block-post-excerpt p { color: rgb(255 255 255 / .92); }
.qasl-card .wp-block-post-featured-image { margin: 0 -60px 0 -40px !important; }
.qasl-card .wp-block-post-featured-image img { display: block; height: 200px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; transition: transform .6s var(--ease); }
.qasl-card:hover .wp-block-post-featured-image img { transform: scale(1.05); transform-origin: left bottom; }
.qasl-blog-pagination { margin-top: 44px !important; gap: 14px; }
.qasl-blog-pagination a, .qasl-blog-pagination span { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.qasl-blog-pagination a:hover { color: var(--blue); }

/* ---------------------------------------------------------------
   Phone refinements (desktop and tablet layouts are untouched)
   --------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Nothing may spill sideways. */
	img, svg, video, iframe, figure { max-width: 100%; }
	.qasl-wrap, .qasl-section { max-width: 100%; }

	/* Display type */
	.qasl-section h2, .qasl-startups h2, .qasl-contact h2 { font-size: 32px !important; line-height: 36px !important; }
	.qasl-hero__panel h1, .qasl-bento-hero__main h1 { font-size: 32px !important; line-height: 36px !important; }
	.qasl-hero__sub, .qasl-bento-hero__sub { font-size: 16px !important; }
	.qasl-hero__ticker span, .qasl-hero__ticker .qasl-hero__ticker-item { font-size: 56px !important; padding-right: 30px; }
	.qasl-counter { font-size: 72px !important; }
	.qasl-counter__plus { font-size: 44px !important; }
	.qasl-reason__num { font-size: 68px !important; }

	/* Hero panels */
	.qasl-hero__panel { padding: 36px 22px !important; }
	.qasl-bento-hero__main { padding: 32px 22px !important; }
	.qasl-bento-hero__visual { padding: 26px 22px !important; min-height: 320px; }
	.qasl-bento-hero__stat-label { max-width: 100%; }

	/* Service / blog cards: reclaim the 100px of side padding */
	.qasl-card { min-height: 0; padding: 28px 24px 0 !important; }
	.qasl-card h3, .qasl-card .wp-block-post-title { max-width: 100%; }
	.qasl-blog-query .qasl-card .wp-block-post-title { max-width: calc(100% - 44px); }
	.qasl-card .wp-block-image,
	.qasl-card .wp-block-post-featured-image { margin: 20px -24px 0 -24px !important; }
	.qasl-card .wp-block-image img,
	.qasl-card .wp-block-post-featured-image img { height: 160px; }
	.qasl-card::before { width: 60px; height: 60px; }
	.qasl-card::after { width: 42px; height: 42px; top: 12px; right: 12px; background-size: 14px; }

	/* Fixed widths that would overflow a phone */
	.qasl-quote { width: 100% !important; max-width: 100%; }
	.qasl-startups__photo img { width: 100% !important; height: auto; }
	.qasl-badge, .qasl-badge::before { width: 180px !important; height: 180px !important; }
	/* Half of the ring sits above the cream band, as on desktop.
	   The old -122px was half of the 240px ring, not this one. */
	.qasl-badge { top: -92px !important; }
	.qasl-badge__img, .qasl-badge__img img { width: 130px !important; height: 130px !important; }

	/* Reading comfort */
	.qasl-partner-card { padding: 24px 20px !important; }
	.qasl-prose-card, .qasl-deliverables-box, .qasl-faq, .qasl-compare-card { padding: 24px 20px !important; }
	.qasl-tab-card { padding: 20px 20px !important; }
	.qasl-industry-card { padding: 24px 20px !important; }
	.qasl-reason { padding: 26px 20px !important; }

	/* Comfortable tap targets */
	.wp-block-button__link { min-height: 54px; }
	.qasl-pnav__link { padding-block: 14px; }

	/* Blog pagination */
	.qasl-blog-pagination { margin-top: 32px !important; flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 430px) {
	:root { --gutter: 16px; }
	.qasl-section h2, .qasl-startups h2, .qasl-contact h2 { font-size: 28px !important; line-height: 32px !important; }
	.qasl-hero__panel h1, .qasl-bento-hero__main h1 { font-size: 28px !important; line-height: 32px !important; }
	.qasl-hero__ticker span, .qasl-hero__ticker .qasl-hero__ticker-item { font-size: 44px !important; }
	.qasl-counter { font-size: 60px !important; }
	.qasl-bento-hero__chip, .qasl-card__badge, .qasl-industry-card__tag { font-size: 12px !important; }
	.qasl-footer__title { font-size: 34px !important; line-height: 38px !important; }
}

/* Referral page: no hero, so it carries its own clearance below the fixed header.
   Padding, not margin: a top margin on the first child of .qasl-main collapses
   through it and the header lands on the content. The header is about 110px tall,
   so the old 112px left roughly 2px of gap. The admin bar needs no separate rule,
   as it shifts the header and the page content down by the same amount. */
.qasl-referral { padding-top: 190px; padding-bottom: 10px; }

.qasl-referral__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 70px; align-items: center; }
.qasl-referral__intro .qasl-label { margin-bottom: 20px !important; }
.qasl-referral__intro h2 { max-width: 440px; margin: 0 !important; font-size: 50px; line-height: 1.05; letter-spacing: -2px; }
.qasl-referral__lead { margin: 24px 0 0 !important; max-width: 420px; font-size: 17px; line-height: 1.65; color: var(--text); }

/* Three steps, three columns. The shared grid is four wide, which left the
   fourth column empty and opened a gap down the right of the page. */
.qasl-referral-steps { padding-top: 60px !important; padding-bottom: 80px !important; }
.qasl-referral-steps .qasl-head { margin-bottom: 40px !important; }
.qasl-referral-steps .qasl-reasons__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; }

/* Staff entry point in the footer: quiet, since it is for QAS staff, not clients. */
.qasl-footer__admin { color: inherit; text-decoration: none; opacity: .7; transition: opacity .25s ease, color .25s ease; }
.qasl-footer__admin:hover { opacity: 1; color: var(--blue); text-decoration: underline; }

/* Staff sign-in, shown in place of the generator to anyone who may not use it. */
.qasl-ref-login { max-width: 580px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 40px 44px; box-shadow: 0 4px 16px rgb(15 37 55 / .04); }
.qasl-ref-login__title { margin: 0 0 10px !important; font-size: 24px !important; line-height: 1.25 !important; color: var(--ink); }
.qasl-ref-login__intro { margin: 0 0 26px !important; font-size: 16px; line-height: 1.6; color: var(--text); }
.qasl-ref-login__note { margin: 0 0 20px !important; padding: 14px 18px; border-radius: 16px; background: var(--cream); font-size: 15px; line-height: 1.55; color: var(--ink); }
.qasl-ref-login #qasl-ref-login p { margin: 0 0 18px !important; }
.qasl-ref-login label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.qasl-ref-login input[type="text"], .qasl-ref-login input[type="password"] { display: block; width: 100%; margin-top: 10px; height: 56px; padding: 0 20px; border: 1px solid var(--line); border-radius: 30px; background: var(--field); font-family: inherit; font-size: 15px; color: var(--ink); box-sizing: border-box; transition: border-color .25s, background-color .25s; }
.qasl-ref-login input[type="text"]:focus, .qasl-ref-login input[type="password"]:focus { outline: none; border-color: var(--blue); background: #fff; }
.qasl-ref-login .login-remember label { font-weight: 400; color: var(--text); }
.qasl-ref-login .login-remember input { margin-right: 8px; }
.qasl-ref-login .login-submit { margin-bottom: 0 !important; }
.qasl-ref-login input[type="submit"] { height: 56px; padding: 0 34px; border: 0; border-radius: 30px; background: var(--blue); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .3s ease; }
.qasl-ref-login input[type="submit"]:hover { background: var(--ink); }

@media (max-width: 1080px) {
	.qasl-referral { padding-top: 130px; }
	.qasl-referral__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
	.qasl-referral__intro h2 { max-width: none; font-size: 38px; letter-spacing: -1.2px; }
	.qasl-referral__lead { max-width: none; }
}
@media (max-width: 781px) {
	.qasl-referral-steps .qasl-reasons__grid { grid-template-columns: 1fr !important; }
	.qasl-ref-login { padding: 28px 24px; }
	.qasl-ref-login input[type="submit"] { width: 100%; }
}

/* ---------------------------------------------------------------
   Share this article: WhatsApp and email, below the post body
   --------------------------------------------------------------- */
.qasl-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.qasl-share__label { font-size: 15px; font-weight: 600; color: var(--ink); }
.qasl-share__links { display: flex; flex-wrap: wrap; gap: 12px; }
.qasl-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 30px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.qasl-share__btn svg { width: 20px; height: 20px; }
.qasl-share__btn--wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.qasl-share__btn--mail:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 600px) {
	.qasl-share { gap: 12px; }
	.qasl-share__links { width: 100%; }
	.qasl-share__btn { flex: 1 1 140px; justify-content: center; }
}

/* ============================================================
   BLOG: article cards, category pills and the blog sidebar
   New qasl-blog-* selectors only, so approved pages are untouched.
   ============================================================ */

.qasl-blog-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 26px !important; }
.qasl-blog-grid > * { margin: 0 !important; }

/* Every card fills its row cell, so all cards are the same height regardless of text length. */
.qasl-blog-card { position: relative; height: 100%; display: flex !important; flex-direction: column; }
.qasl-blog-card::after { background-image: var(--icon-arrow-ur); }

/* Extra breathing room under the blog grid before the footer banner (blog only). */
.qasl-blog-sec { padding-bottom: 90px !important; }

/* The category pill, matching the contact cards. */
.qasl-blog-card .qasl-contact-card__tag { width: fit-content; }
.qasl-blog-card .qasl-contact-card__tag a { color: var(--blue); text-decoration: none; font-weight: 700; }
.qasl-blog-card:hover .qasl-contact-card__tag a,
.qasl-blog-card:focus-within .qasl-contact-card__tag a { color: var(--blue); }

.qasl-blog-card h3 { margin: 0 0 12px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.qasl-blog-card h3 a { color: inherit; text-decoration: none; }
/* Makes the whole card clickable without wrapping it in an extra link. */
.qasl-blog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }

/* Clamp the excerpt so long and short articles produce the same card. */
.qasl-blog-card__excerpt { margin: 0 !important; font-size: 16px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

.qasl-blog-pagination { margin-top: 36px !important; gap: 10px; }
.qasl-blog-pagination a, .qasl-blog-pagination span { color: var(--ink); text-decoration: none; font-weight: 700; }

@media (max-width: 781px) {
	.qasl-blog-grid { grid-template-columns: 1fr; gap: 18px !important; }
	.qasl-blog-card h3 { font-size: 20px !important; }
	.qasl-blog-card__excerpt { font-size: 15.5px !important; }
}

/* ============================================================
   BRAND: home-hero tagline and the About boutique section
   ============================================================ */

.qasl-hero__tagline { margin: 0 0 14px !important; line-height: 1.25 !important; }
.qasl-hero__tagline-hl { display: inline-block; font-size: 30px !important; font-weight: 800; color: var(--ink); background: linear-gradient(transparent 58%, rgba(49, 148, 204, .28) 0); padding: 0 2px; }
.qasl-hero__tagline-sub { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); }

.qasl-boutique { margin-top: 60px !important; padding: 74px 0 !important; background: var(--cream); }
.qasl-boutique__inner { max-width: 840px; }
.qasl-boutique h2 { font-size: 40px !important; line-height: 1.15 !important; margin: 8px 0 20px !important; color: var(--ink); }
.qasl-boutique__lead { font-size: 20px !important; line-height: 1.5 !important; color: var(--ink); margin: 0 0 22px !important; }
.qasl-boutique__line { font-size: 22px !important; font-weight: 800 !important; color: var(--blue); margin: 0 0 14px !important; }
.qasl-boutique p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 0 12px !important; }

@media (max-width: 781px) {
	.qasl-hero__tagline-hl { font-size: 23px !important; }
	.qasl-boutique { margin-top: 36px !important; padding: 48px 0 !important; }
	.qasl-boutique h2 { font-size: 30px !important; }
	.qasl-boutique__lead { font-size: 18px !important; }
	.qasl-boutique__line { font-size: 19px !important; }
}

/* ===============================================================
   PHONE: iOS-style app layer
   ---------------------------------------------------------------
   Everything below is scoped to 781px and narrower. The desktop
   layout is approved and must not move, so the only rules outside
   a media query are the two that keep the phone-only chrome hidden.
   =============================================================== */

.qasl-sheet,
.qasl-tabbar { display: none; }

@media (max-width: 781px) {

	:root {
		--gutter: 16px;
		--r: 24px;
		--ios-curve: cubic-bezier(.32, .72, 0, 1);
		--ios-sep: rgb(60 60 67 / .18);
		--ios-label-2: rgb(60 60 67 / .6);
		--ios-label-3: rgb(60 60 67 / .3);
		--ios-fill: rgb(120 120 128 / .12);
		--ios-grouped: #F2F2F7;
		--ios-press: #E5E5EA;
		--ios-glass: rgb(255 255 255 / .78);
		--ios-bar: 56px;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		overflow-x: clip;
	}
	a, button, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }

	/* --- Navigation bar --------------------------------------------
	   Frosted glass, a hairline instead of a shadow, and clearance for
	   the notch now that the viewport runs edge to edge. */
	.qasl-header,
	html.is-scrolled .qasl-header {
		padding-top: env(safe-area-inset-top, 0px);
		background: var(--ios-glass) !important;
		backdrop-filter: saturate(180%) blur(20px) !important;
		-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
		box-shadow: 0 .5px 0 rgb(0 0 0 / .14) !important;
	}
	.qasl-pnav__inner,
	html.is-scrolled .qasl-pnav__inner {
		height: var(--ios-bar);
		gap: 12px;
		padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important;
	}
	.qasl-pnav__logo img,
	html.is-scrolled .qasl-pnav__logo img { height: 38px !important; }
	.qasl-pnav__menu { display: none !important; }
	.qasl-pnav__toggle {
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 4px;
		border: 0;
		border-radius: 50%;
		background: var(--ios-fill);
		transition: background-color .15s ease, transform .15s ease;
	}
	.qasl-pnav__toggle span { width: 16px; height: 1.8px; background: #000; }
	.qasl-pnav__toggle:active { background: rgb(120 120 128 / .24); transform: scale(.92); }

	/* --- Menu sheet --------------------------------------------------
	   Rises from the bottom with the iOS spring curve, in the inset
	   grouped style of the Settings app. Drag the header down to close. */
	.qasl-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 200;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear .5s;
	}
	html.is-sheet-open .qasl-sheet { visibility: visible; pointer-events: auto; transition: visibility 0s; }

	.qasl-sheet__scrim {
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / .38);
		opacity: 0;
		transition: opacity .45s var(--ios-curve);
	}
	html.is-sheet-open .qasl-sheet__scrim { opacity: 1; }

	.qasl-sheet__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: calc(100% - env(safe-area-inset-top, 0px) - 12px);
		background: var(--ios-grouped);
		border-radius: 28px 28px 0 0;
		box-shadow: 0 -12px 40px rgb(0 0 0 / .18);
		transform: translateY(105%);
		transition: transform .5s var(--ios-curve);
		will-change: transform;
	}
	html.is-sheet-open .qasl-sheet__panel { transform: translateY(0); }

	.qasl-sheet__head {
		position: relative;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 58px;
		padding: 0 16px;
		touch-action: none;
	}
	.qasl-sheet__grabber {
		position: absolute;
		top: 6px;
		left: 50%;
		width: 36px;
		height: 5px;
		margin-left: -18px;
		border-radius: 3px;
		background: var(--ios-label-3);
	}
	.qasl-sheet__title {
		margin: 0 !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		letter-spacing: -.2px !important;
		color: #000 !important;
	}
	.qasl-sheet__done {
		position: absolute;
		top: 50%;
		right: 6px;
		transform: translateY(-50%);
		padding: 10px 12px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 17px;
		font-weight: 600;
		color: var(--blue);
		cursor: pointer;
	}
	.qasl-sheet__done:active { opacity: .45; }

	.qasl-sheet__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 2px 16px calc(28px + env(safe-area-inset-bottom, 0px));
	}
	.qasl-sheet__group {
		list-style: none !important;
		margin: 0 0 26px !important;
		padding: 0 !important;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
	}
	.qasl-sheet__group li { position: relative; margin: 0 !important; }
	.qasl-sheet__group li + li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 60px;
		right: 0;
		height: .5px;
		background: var(--ios-sep);
	}
	.qasl-sheet__row {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 50px;
		padding: 8px 14px 8px 15px;
		color: #000 !important;
		font-size: 17px;
		line-height: 1.25;
		letter-spacing: -.2px;
		text-decoration: none !important;
		transition: background-color .12s ease;
	}
	.qasl-sheet__row:active { background: var(--ios-press); }
	.qasl-sheet__row.is-current .qasl-sheet__text { color: var(--blue); font-weight: 600; }
	.qasl-sheet__text { flex: 1 1 auto; min-width: 0; }
	.qasl-sheet__value {
		flex: none;
		max-width: 56%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 15px;
		color: var(--ios-label-2);
	}
	.qasl-sheet__chev { flex: none; width: 16px; height: 16px; color: var(--ios-label-3); stroke-width: 2.6; }

	.qasl-sheet__tile {
		flex: none;
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		color: #fff;
	}
	.qasl-sheet__tile svg { width: 18px; height: 18px; stroke-width: 2.1; }
	.qasl-sheet__tile--blue { background: var(--blue); }
	.qasl-sheet__tile--indigo { background: #5856D6; }
	.qasl-sheet__tile--orange { background: #FF9500; }
	.qasl-sheet__tile--teal { background: #30B0C7; }
	.qasl-sheet__tile--green { background: #34C759; }
	.qasl-sheet__tile--wa { background: #25D366; }
	.qasl-sheet__tile--soft { background: #E6F2FA; color: var(--blue); }

	.qasl-sheet__caption {
		margin: 0 0 7px !important;
		padding: 0 16px;
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
		letter-spacing: .3px;
		text-transform: uppercase;
		color: var(--ios-label-2) !important;
	}
	.qasl-sheet__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 54px;
		border-radius: 16px;
		background: var(--blue);
		color: #fff !important;
		font-size: 17px;
		font-weight: 600;
		text-decoration: none !important;
		box-shadow: 0 6px 18px rgb(49 148 204 / .35);
		transition: transform .12s ease, background-color .12s ease;
	}
	.qasl-sheet__cta:active { transform: scale(.98); background: #2a83b6; }

	/* --- Tab bar ------------------------------------------------------
	   A floating glass capsule, as in current iOS, with booking as the
	   one filled action. Steps aside while the sheet or keyboard is up. */
	.qasl-tabbar {
		position: fixed;
		z-index: 85;
		left: max(12px, env(safe-area-inset-left, 0px));
		right: max(12px, env(safe-area-inset-right, 0px));
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		display: grid;
		grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr;
		align-items: center;
		height: 64px;
		padding: 6px;
		border-radius: 32px;
		background: rgb(255 255 255 / .74);
		backdrop-filter: saturate(180%) blur(24px);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		border: .5px solid rgb(255 255 255 / .7);
		box-shadow: 0 10px 30px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .06), inset 0 .5px 0 rgb(255 255 255 / .9);
		transition: transform .45s var(--ios-curve), opacity .3s ease;
	}
	html.is-sheet-open .qasl-tabbar,
	html.is-typing .qasl-tabbar { transform: translateY(calc(100% + 30px)); opacity: 0; }

	.qasl-tabbar__item,
	.qasl-tabbar__book {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		height: 52px;
		border-radius: 26px;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .1px;
		line-height: 1;
		text-decoration: none !important;
		transition: transform .12s ease, background-color .2s ease, color .2s ease;
	}
	.qasl-tabbar__item { color: rgb(60 60 67 / .72) !important; }
	.qasl-tabbar__item svg,
	.qasl-tabbar__book svg { width: 23px; height: 23px; stroke-width: 1.9; }
	.qasl-tabbar__item.is-current { color: var(--blue) !important; background: rgb(49 148 204 / .12); }
	.qasl-tabbar__book {
		margin: 0 3px;
		background: var(--blue);
		color: #fff !important;
		font-weight: 700;
		box-shadow: 0 6px 16px rgb(49 148 204 / .42);
	}
	.qasl-tabbar__item:active,
	.qasl-tabbar__book:active { transform: scale(.92); }

	/* The tab bar replaces the floating buttons and the back-to-top circle. */
	.qasl-float,
	.qasl-top { display: none !important; }

	/* --- Heroes -------------------------------------------------------
	   Headline first, image second, both as rounded cards inset from the
	   screen edge, as an app lays out its first screen. */
	.qasl-hero,
	.qasl-bento-hero {
		display: flex !important;
		flex-direction: column;
		gap: 10px !important;
		min-height: 0 !important;
		margin-top: calc(var(--ios-bar) + env(safe-area-inset-top, 0px)) !important;
		padding: 8px 8px 0 !important;
	}
	.qasl-hero .qasl-hero__panel { order: -1; }
	.qasl-hero .qasl-hero__panel,
	.qasl-bento-hero .qasl-bento-hero__main { padding: 30px 22px 30px !important; border-radius: 28px; }
	.qasl-hero__panel h1,
	.qasl-bento-hero__main h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -.9px !important; }
	.qasl-hero__sub,
	.qasl-bento-hero__sub { margin-top: 14px !important; font-size: 17px !important; line-height: 1.5 !important; }
	.qasl-hero__media { height: 260px !important; border-radius: 28px; }
	.qasl-hero__ticker { top: 70px !important; }
	.qasl-hero__ticker span,
	.qasl-hero__ticker .qasl-hero__ticker-item { font-size: 44px !important; }

	.qasl-bento-hero__chips { gap: 8px !important; margin-top: 18px !important; }
	.qasl-bento-hero__chip { padding: 7px 12px 7px 8px !important; font-size: 12.5px !important; }
	.qasl-bento-hero__visual { min-height: 230px !important; padding: 16px !important; border-radius: 28px; }
	.qasl-bento-hero__stat { padding: 18px 20px !important; border-radius: 20px 0 20px 20px; box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
	.qasl-bento-hero__stat-num { font-size: 30px !important; letter-spacing: -1px; }
	.qasl-bento-hero__stat-label { max-width: none !important; font-size: 15px !important; line-height: 1.35 !important; }

	/* Pages without a hero carry their own clearance. */
	.qasl-referral { padding-top: calc(var(--ios-bar) + 32px + env(safe-area-inset-top, 0px)) !important; }

	/* --- Type and section rhythm --------------------------------------
	   One scale, close to iOS: 34 large title, 28 section, 17 body.
	   Section heads align left, as app screens do. */
	.qasl-section h2,
	.qasl-startups h2,
	.qasl-contact h2 { font-size: 28px !important; line-height: 1.14 !important; letter-spacing: -.6px !important; }
	.qasl-head { margin-bottom: 22px !important; text-align: left !important; }
	.qasl-head h2 { max-width: none !important; margin-inline: 0 !important; }
	.qasl-label { margin-bottom: 14px !important; }

	.qasl-cards,
	.qasl-reasons__grid,
	.qasl-reasons__grid--4,
	.qasl-industry-grid,
	.qasl-process__grid,
	.qasl-check-grid,
	.qasl-benefits-grid,
	.qasl-contact-cards__grid { gap: 14px !important; }

	/* Press feedback: a quick shrink, the way iOS acknowledges a tap. */
	.qasl-card:active,
	.qasl-industry-card:active,
	.qasl-contact-card:active,
	.qasl-sidebar-links a:active,
	.qasl-share__btn:active,
	.wp-block-button__link:active { transform: scale(.97); transition: transform .1s ease !important; }

	/* --- Buttons: full width, thumb sized ------------------------------ */
	.wp-block-buttons { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 10px !important; width: 100%; }
	.wp-block-button { width: 100%; margin: 0 !important; }
	.wp-block-button__link {
		width: 100% !important;
		min-height: 56px !important;
		justify-content: space-between !important;
		padding: 7px 7px 7px 22px !important;
		font-size: 16px !important;
	}
	.wp-block-button__link::after { width: 42px; height: 42px; }
	.qasl-btn-plain .wp-block-button__link { justify-content: center !important; padding: 14px 24px !important; }

	/* --- Article and service bodies ------------------------------------ */
	.qasl-prose-card { padding: 24px 18px !important; }
	.qasl-prose-card h2 { font-size: 24px !important; letter-spacing: -.4px; }
	.qasl-prose-card h3 { margin: 24px 0 10px !important; font-size: 20px !important; }
	.qasl-prose-card p,
	.qasl-prose-card li { font-size: 17px !important; line-height: 1.62 !important; }
	.qasl-sidebar-cta { padding: 26px 22px !important; border-radius: 28px; }
	.qasl-sidebar-cta h3 { font-size: 22px !important; }
	.qasl-sidebar-cta p { font-size: 16px !important; }

	/* --- Enquiry form: iOS fields, never smaller than 16px -------------
	   Anything under 16px makes iOS zoom the page on focus. */
	.qasl-form { gap: 12px !important; }
	.qasl-form__row { grid-template-columns: 1fr !important; gap: 12px !important; }
	.qasl-form input,
	.qasl-form select { height: 52px !important; padding: 0 18px !important; border-radius: 14px !important; font-size: 17px !important; }
	.qasl-form textarea { height: 140px !important; padding: 14px 18px !important; border-radius: 14px !important; font-size: 17px !important; }
	.qasl-form select { background-position: right 18px center !important; }
	.qasl-form__foot { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
	.qasl-form__foot p { order: 2; font-size: 13px !important; text-align: center; color: var(--light) !important; }

	/* --- Contact block: details as one grouped card --------------------- */
	.qasl-contact { padding-block: 44px !important; }
	.qasl-contact__grid { gap: 26px !important; }
	.qasl-contact__intro { margin-bottom: 20px !important; font-size: 18px !important; line-height: 1.4 !important; }
	.qasl-contact__items {
		gap: 0 !important;
		margin-top: 22px !important;
		padding: 2px 16px;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 6px 20px rgb(15 37 55 / .06);
	}
	.qasl-contact__item { padding: 14px 0 14px 52px !important; }
	.qasl-contact__item + .qasl-contact__item { border-top: .5px solid var(--ios-sep); }
	.qasl-contact__item::before { top: 14px; width: 38px; height: 38px; border-radius: 11px; background-size: 18px; }
	.qasl-contact__val { font-size: 16px !important; overflow-wrap: anywhere; }

	/* --- Footer --------------------------------------------------------
	   The dark footer runs on beneath the glass tab bar, so the bar
	   floats over the page rather than cutting it off. */
	.qasl-footer {
		margin-top: -24px !important;
		padding: 64px 8px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.qasl-footer__title { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.6px; }
	.qasl-footer__sub { margin-top: 14px !important; font-size: 16px; }
	.qasl-footer__stage { margin-top: 20px !important; }
	.qasl-footer__giant { font-size: 24vw !important; }
	.qasl-footer__cta,
	.qasl-footer__cta a { width: 104px !important; height: 104px !important; }
	.qasl-footer__cta a { font-size: 14px !important; }
	.qasl-footer__card { padding: 26px 18px 20px !important; border-radius: 28px; }
	.qasl-footer__cols { gap: 22px !important; }
	.qasl-footer__card p { font-size: 15.5px; }
	.qasl-footer__links {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		overflow: hidden;
		background: var(--ios-grouped);
		border-radius: 16px;
	}
	.qasl-footer__links li { position: relative; margin: 0 !important; }
	.qasl-footer__links li + li::before {
		content: "";
		position: absolute;
		top: 0;
		left: 16px;
		right: 0;
		height: .5px;
		background: var(--ios-sep);
	}
	.qasl-footer__links a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 0 18px 0 16px;
		font-size: 16px;
		font-weight: 600;
	}
	.qasl-footer__links a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid var(--ios-label-3);
		border-right: 2px solid var(--ios-label-3);
		transform: rotate(45deg);
	}
	.qasl-footer__links a:active { background: var(--ios-press); }
	.qasl-footer__contact a { font-size: 17px !important; }
	.qasl-footer__social { margin-top: 18px !important; font-size: 14.5px !important; line-height: 1.9 !important; }
	.qasl-footer__bottom { margin-top: 24px !important; padding-top: 18px; font-size: 13px !important; line-height: 1.5; }
}

/* ===============================================================
   PHONE: alignment corrections
   ---------------------------------------------------------------
   Desktop above 1081px stays frozen, so every rule here lives
   inside a phone media query. Each one fixes a desktop value that
   did not survive the move to a 390px screen.
   =============================================================== */

@media (max-width: 781px) {

	/* --- Hero skyline --------------------------------------------
	   The desktop crop pulls the picture up 68px and forces it to
	   850px tall so the towers clear a 630px panel. In a 260px phone
	   card that window lands in open sky, so only the tip of the
	   Burj showed. Let the picture fill the card instead, and drop
	   the scroll parallax, which on a short card only pushes the
	   skyline further out of frame. */
	.qasl-hero__media { height: 300px !important; }
	.qasl-hero__city {
		top: 0 !important;
		height: 100% !important;
		min-height: 100% !important;
		transform: none !important;
	}
	.qasl-hero__city img {
		height: 100% !important;
		min-height: 0 !important;
		object-position: center 58%;
	}
	.qasl-hero__ticker { top: 84px !important; }

	/* --- Section labels ------------------------------------------
	   A label is a 140px marquee window: fine for the ones that
	   carry a scrolling track, but a label with plain text just sat
	   clipped mid-word. Size those to their text. */
	.qasl-label:not(:has(.qasl-label__track)) {
		width: max-content;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		padding-inline: 14px;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* --- Clients-say badge ---------------------------------------
	   The brand mark was placed with a 33px inset measured off the
	   240px desktop ring. The phone ring is 180px, so the mark sat
	   low and to the right of its own ring. Centre it by ratio, so
	   it holds at any ring size. */
	.qasl-badge__img {
		left: 50% !important;
		top: 50% !important;
		width: 72% !important;
		height: 72% !important;
		transform: translate(-50%, -50%);
	}
	.qasl-badge__img img {
		width: 100% !important;
		height: 100% !important;
		padding: 18%;
	}

	/* --- Testimonials --------------------------------------------
	   `padding: 160px 0` overrode the section gutter, so the quotes
	   ran edge to edge. Restore the gutter. The top padding keeps the
	   desktop's 42px of clear space between the ring and the cards:
	   the 240px ring ends 118px into the band, the cards start at 160. */
	.qasl-testimonials {
		padding: 160px var(--gutter) 56px !important;
	}

	/* The quotes run as the same right-to-left marquee as desktop,
	   edge to edge, with cards sized to the phone. */
	.qasl-quotes {
		margin-inline: calc(var(--gutter) * -1) !important;
	}
	.qasl-quotes__track {
		gap: 16px !important;
	}
	.qasl-quote {
		width: 78vw !important;
		max-width: 300px;
		min-height: 0 !important;
		padding: 28px 24px !important;
		gap: 18px !important;
		border-radius: 24px;
	}
	.qasl-quote blockquote,
	.qasl-quote__text { font-size: 17px !important; line-height: 1.5 !important; }

	/* --- About: boutique band ------------------------------------
	   Same overridden gutter as the testimonials: the copy sat flush
	   against the left edge of the screen. */
	.qasl-boutique { padding: 48px var(--gutter) !important; }

	/* --- Footer booking circle -----------------------------------
	   At 104px with 14px type, "Consultation" was wider than the
	   circle and spilled over its curve. A wider disc and less padding
	   put the words back inside it. Colour, hover fill and scale are
	   left to the desktop rule, so the circle behaves the same here. */
	.qasl-footer__cta {
		top: 50% !important;
		width: 140px !important;
		height: 140px !important;
		transform: translate(-50%, -50%) !important;
	}
	.qasl-footer__cta a {
		width: 140px !important;
		height: 140px !important;
		padding: 12px !important;
		font-size: 15px !important;
		line-height: 1.25 !important;
	}

	/* --- Tab bar: follow the header ------------------------------
	   The header already hides on a downward scroll and returns on
	   the way up. The tab bar now rides the same signal, so the
	   page is never pinched from both ends while reading. */
	html.is-nav-hidden .qasl-tabbar {
		transform: translateY(calc(100% + 30px));
		opacity: 0;
	}
}

/* Small phones carry the 180px ring, raised 92px, so it ends 88px
   into the band. Cards start at 130px: the same 42px gap as desktop.
   The band's top margin only needs to clear the 92px above it. */
@media (max-width: 600px) {
	.qasl-testimonials {
		margin-top: 116px !important;
		padding-top: 130px !important;
	}
	/* The wave is cut to fit the 240px desktop ring. Scale it with
	   the 180px ring (3/4), so the ring sits in the curve as it does
	   on desktop and the wave ends just below it, clear of the cards. */
	.qasl-testimonials::before {
		width: 300px;
		height: 99px;
	}
}

/* Touch screens have no hover: a tap left the desktop hover pause
   stuck on, so the quotes stopped for good. Pause only while a
   finger is down, and resume on release. */
@media (max-width: 781px) and (hover: none) {
	.qasl-quotes:hover .qasl-quotes__track { animation-play-state: running; }
	.qasl-quotes:active .qasl-quotes__track { animation-play-state: paused; }
}

/* Narrow phones: iPhone SE and small Android handsets. */
@media (max-width: 380px) {
	.qasl-hero__panel h1,
	.qasl-bento-hero__main h1 { font-size: 30px !important; }
	.qasl-section h2,
	.qasl-startups h2,
	.qasl-contact h2 { font-size: 25px !important; }
	.qasl-tabbar__item,
	.qasl-tabbar__book { font-size: 9.5px; }
}