/* ==========================================================================
   ASL Masterpiece — main stylesheet
   ========================================================================== */

:root {
	--c-bg: #ffffff;
	--c-bg-2: #eeedee;
	--c-bd: #cbccc9;
	--c-title: #1c1a23;
	--c-text: #7b7882;
	--c-meta: #a9a8ad;
	--c-link: #591eff;
	--c-hover: #501be5;
	--c-blue: #0508f5;
	--c-alt-bg: #201e28;
	--c-alt-title: #f8f8ff;
	--c-alt-text: #bebdc1;
	--c-star: #ed8a19;

	--f-body: "DM Sans", sans-serif;
	--f-head: "Plus Jakarta Sans", sans-serif;

	--container: 1290px;
	--gutter: 75px;
	--section: 150px;
	--radius: 26px;
	--radius-sm: 10px;
	--header-h: 100px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1279px) {
	:root { --gutter: 40px; --section: 110px; }
}
@media (max-width: 1023px) {
	:root { --section: 90px; --radius: 20px; --header-h: 84px; }
}
@media (max-width: 767px) {
	:root { --gutter: 20px; --section: 70px; --radius: 16px; --header-h: 76px; }
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--c-link); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--c-hover); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--c-title); font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--f-head);
	font-weight: 600;
	color: var(--c-title);
	line-height: 1.12;
}
h1 { font-size: 57px; letter-spacing: -0.03em; line-height: 1.105; }
h2 { font-size: 46px; letter-spacing: -0.02em; }
h3 { font-size: 35px; }
h4 { font-size: 26px; line-height: 1.2; }
h5 { font-size: 22px; line-height: 1.27; }
h6 { font-size: 19px; line-height: 1.37; }

.asl-skip {
	position: absolute; left: -9999px; top: 10px; z-index: 1000;
	background: var(--c-title); color: #fff; padding: 10px 18px; border-radius: 6px;
}
.asl-skip:focus { left: 10px; color: #fff; }

:focus-visible { outline: 2px solid var(--c-link); outline-offset: 3px; }

/* Layout helpers ------------------------------------------------------------ */
.asl-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.asl-section { padding: var(--section) 0; }
.asl-section--flush-top { padding-top: 0; }
.asl-section--tight-bottom { padding-bottom: 60px; }
.asl-center { text-align: center; }
.asl-muted { color: var(--c-text); }

.asl-label {
	margin: 0 0 22px;
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-text);
}
.asl-h1 {
	font-size: 57px;
	line-height: 1.105;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
}
.asl-h1:last-child { margin-bottom: 0; }
.asl-text p { margin-bottom: 1.1em; }

.asl-headrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
	margin-bottom: 50px;
}
.asl-headrow .asl-label { margin-top: 10px; }
.asl-headrow .asl-h1 { margin: 0; }

.asl-divider { border: 0; border-top: 1px solid var(--c-bd); margin: 0; }

/* Buttons ------------------------------------------------------------------ */
.asl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 40px;
	border: 0;
	border-radius: 28px;
	background: var(--c-link);
	color: #fff;
	font-family: var(--f-head);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.asl-btn:hover { background: var(--c-hover); color: #fff; transform: translateY(-2px); }
.asl-btn--blue { background: var(--c-blue); }
.asl-btn--blue:hover { background: #0306c9; }
.asl-btn--shadow { box-shadow: 0 10px 30px rgba(5, 8, 245, .35); }
.asl-btn--block { width: 100%; }

.asl-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--f-head); font-weight: 600; font-size: 15px;
}
.asl-ico { display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto; }
.asl-ico svg { width: 100%; height: 100%; }

/* Reveal animations --------------------------------------------------------- */
.asl-js .asl-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	transition-delay: var(--d, 0ms);
}
.asl-js .asl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.asl-js .asl-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* Header ------------------------------------------------------------------- */
.asl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	transition: box-shadow .3s var(--ease);
}
.admin-bar .asl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .asl-header { top: 0; } }
.asl-header.is-scrolled { box-shadow: 0 6px 30px rgba(28, 26, 35, .08); }
.asl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	gap: 30px;
}
.asl-header__logo img { height: 80px; width: auto; }
@media (max-width: 1023px) { .asl-header__logo img { height: 64px; } }
@media (max-width: 767px) { .asl-header__logo img { height: 56px; } }

.asl-menu { display: flex; align-items: center; gap: 6px; }
.asl-menu > li { position: relative; }
.asl-menu a {
	display: block;
	padding: 10px 16px;
	font-family: var(--f-head);
	font-size: 16px;
	font-weight: 500;
	color: var(--c-title);
}
.asl-menu a:hover,
.asl-menu .current-menu-item > a,
.asl-menu .current-menu-ancestor > a,
.asl-menu .current_page_item > a { color: var(--c-link); }
.asl-menu .menu-item-has-children > a { padding-right: 30px; }
.asl-menu .menu-item-has-children > a::after {
	content: ""; position: absolute; right: 14px; top: 50%;
	width: 7px; height: 7px; margin-top: -6px;
	border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.asl-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px;
	padding: 14px 0; background: #fff; border-radius: 14px;
	box-shadow: 0 20px 50px rgba(28, 26, 35, .12);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .25s var(--ease);
}
.asl-menu li:hover > .sub-menu,
.asl-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.asl-menu .sub-menu a { padding: 8px 24px; font-size: 15px; }

.asl-burger {
	display: none; position: relative; width: 44px; height: 44px; padding: 0;
	border: 0; background: transparent;
}
.asl-burger span {
	position: absolute; left: 10px; right: 10px; height: 2px; background: var(--c-title);
	transition: transform .3s var(--ease), opacity .3s;
}
.asl-burger span:nth-child(1) { top: 15px; }
.asl-burger span:nth-child(2) { top: 21px; }
.asl-burger span:nth-child(3) { top: 27px; }
.asl-nav-open .asl-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.asl-nav-open .asl-burger span:nth-child(2) { opacity: 0; }
.asl-nav-open .asl-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
	.asl-burger { display: block; }
	.asl-nav {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
		background: #fff; padding: 20px var(--gutter) 40px; overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-10px);
		transition: all .3s var(--ease);
	}
	.admin-bar .asl-nav { top: calc(var(--header-h) + 46px); }
	.asl-nav-open .asl-nav { opacity: 1; visibility: visible; transform: none; }
	.asl-nav-open { overflow: hidden; }
	.asl-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.asl-menu a { padding: 16px 0; font-size: 22px; border-bottom: 1px solid var(--c-bg-2); }
	.asl-menu .menu-item-has-children > a::after { right: 4px; }
	.asl-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; padding: 0 0 0 16px; min-width: 0;
	}
	.asl-menu .sub-menu a { font-size: 17px; padding: 12px 0; }
}

/* Hero --------------------------------------------------------------------- */
.asl-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 80vh;
	padding: 120px 0;
	overflow: hidden;
	background: var(--c-title);
}
.asl-hero__video { position: absolute; inset: 0; pointer-events: none; }
.asl-hero__video iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
}
.asl-hero__overlay { position: absolute; inset: 0; background: var(--c-title); opacity: .5; }
.asl-hero__content { position: relative; z-index: 1; }
.asl-hero__title {
	max-width: 1000px;
	margin: 0 0 30px;
	font-size: 60px;
	line-height: 1.13;
	letter-spacing: 0;
	color: #fff;
}
.asl-hero__text { margin: 0 0 30px; font-size: 28px; line-height: 1.2; color: #fff; }

/* About intro (home) ---------------------------------------------------- */
.asl-stagger {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: end;
}
.asl-stagger__item img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.asl-stagger__item:nth-child(1) img { aspect-ratio: 410 / 570; }
.asl-stagger__item:nth-child(2) img { aspect-ratio: 410 / 510; }
.asl-stagger__item:nth-child(3) img { aspect-ratio: 410 / 450; }

/* Clients ------------------------------------------------------------------ */
.asl-clients { padding: 70px 0; }
.asl-clients__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 30px;
	align-items: center;
}
.asl-clients__item { display: flex; justify-content: center; }
.asl-clients__item img {
	height: 80px; width: auto; max-width: 190px; object-fit: contain;
	filter: grayscale(1); opacity: .75;
	transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.asl-clients__item:hover img { filter: none; opacity: 1; }

/* Service cards -------------------------------------------------------------- */
.asl-service-cards { padding: 0 20px; }
.asl-service-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.asl-scard {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 31.3vw;
	border-radius: var(--radius);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.asl-scard__bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
	transition: transform 1s var(--ease);
}
.asl-scard::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(28, 26, 35, 0) 40%, rgba(28, 26, 35, .75) 100%);
}
.asl-scard:hover .asl-scard__bg { transform: scale(1.08); }
.asl-scard__body {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	width: 100%; padding: 34px;
}
.asl-scard__title { margin: 0; color: #fff; font-size: 26px; line-height: 1.2; }
.asl-scard__arrow {
	display: grid; place-items: center; flex: 0 0 48px; height: 48px;
	border-radius: 50%; background: #fff; color: var(--c-title); font-size: 20px;
	transform: scale(.8); opacity: 0; transition: all .4s var(--ease);
}
.asl-scard:hover .asl-scard__arrow { transform: none; opacity: 1; }

/* Counters ----------------------------------------------------------------- */
.asl-counters__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
.asl-counter { padding-top: 30px; border-top: 1px solid var(--c-bd); }
.asl-counter__num {
	display: flex; align-items: flex-start;
	font-family: var(--f-head); font-weight: 600;
	font-size: 90px; line-height: .9; letter-spacing: 1.7px;
	color: var(--c-title);
	margin-bottom: 26px;
}
.asl-counter__num sup { font-size: .5em; line-height: 1; top: 0; margin-left: 4px; color: var(--c-link); }
.asl-counter__title { margin: 0; font-size: 19px; color: var(--c-text); font-weight: 500; font-family: var(--f-body); }

/* FAQ / accordion -------------------------------------------------------------- */
.asl-faq__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.asl-faq__intro { max-width: 574px; }
.asl-faq__intro .asl-h1 { margin-bottom: 28px; }
.asl-acc { border-bottom: 1px solid var(--c-bd); }
.asl-acc:first-child { border-top: 1px solid var(--c-bd); }
.asl-acc__head { margin: 0; font-size: 19px; }
.asl-acc__head button {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	width: 100%; padding: 26px 0; border: 0; background: none; text-align: left;
	font-family: var(--f-head); font-size: 19px; font-weight: 600; color: var(--c-title);
}
.asl-acc__head .asl-ico {
	width: 36px; height: 36px; padding: 8px; flex: 0 0 36px;
	border-radius: 50%; background: var(--c-bg-2); color: var(--c-title);
	transition: transform .35s var(--ease), background-color .35s, color .35s;
}
.asl-acc.is-open .asl-acc__head .asl-ico { transform: rotate(45deg); background: var(--c-link); color: #fff; }
.asl-acc__body { padding: 0 56px 26px 0; }

/* Contact split (image + form) -------------------------------------------------- */
.asl-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.64fr) minmax(0, 1fr);
	gap: 60px;
	align-items: stretch;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.asl-split__media {
	min-height: 640px;
	background-size: cover; background-position: center;
	border-radius: var(--radius);
}
.asl-split__form { align-self: center; max-width: 420px; }
.asl-split__title { font-size: 35px; line-height: 1.115; margin-bottom: 30px; max-width: 300px; }
.asl-split--edge { padding: 0; }
.asl-split--edge .asl-split__inner {
	max-width: none; padding: 0; grid-template-columns: 1fr 1fr; gap: 0;
}
.asl-split--edge .asl-split__media { border-radius: 0 var(--radius) var(--radius) 0; min-height: 760px; }
.asl-split--edge .asl-split__form { max-width: 600px; padding: 100px var(--gutter) 100px 70px; }
.asl-split--edge .asl-split__title { max-width: none; font-size: 46px; letter-spacing: -0.02em; }

/* Forms ---------------------------------------------------------------------- */
.asl-form__grid { display: flex; flex-wrap: wrap; gap: 16px; }
.asl-field { flex: 1 1 100%; }
.asl-field--half { flex: 1 1 calc(50% - 8px); }
.asl-field label {
	display: block; margin-bottom: 8px;
	font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--c-title);
}
.asl-form input[type="text"],
.asl-form input[type="email"],
.asl-form input[type="tel"],
.asl-form textarea {
	width: 100%;
	padding: 13px 18px;
	border: 1px solid var(--c-bd);
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: var(--c-title);
	transition: border-color .25s;
}
.asl-form textarea { min-height: 100px; resize: vertical; }
.asl-form input::placeholder, .asl-form textarea::placeholder { color: var(--c-meta); }
.asl-form input:focus, .asl-form textarea:focus { outline: 0; border-color: var(--c-link); }
.asl-form.is-invalid :invalid { border-color: #e0384b; }
.asl-field--check label {
	display: flex; gap: 10px; align-items: flex-start; margin: 0;
	font-family: var(--f-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--c-text);
}
.asl-field--check input { margin: 3px 0 0; accent-color: var(--c-link); }
.asl-field--check a { font-weight: 600; }
.asl-field--submit { margin-top: 4px; }
.asl-form--labels .asl-field--submit .asl-btn { width: auto; padding: 14px 40px; }
.asl-form .asl-btn { background: var(--c-blue); padding: 13px 30px; }
.asl-form .asl-btn:hover { background: #0306c9; }
.asl-form .asl-btn[disabled] { opacity: .6; pointer-events: none; }
.asl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.asl-form__msg { margin-top: 14px; font-size: 15px; }
.asl-form__msg:empty { display: none; }
.asl-form__msg .is-ok { color: #1a8f4c; }
.asl-form__msg .is-err { color: #e0384b; }
.asl-form--dark input[type="text"],
.asl-form--dark input[type="email"],
.asl-form--dark input[type="tel"],
.asl-form--dark textarea { background: #fff; border-color: #fff; }
.asl-form--dark .asl-field--check label { color: var(--c-alt-text); }

/* Quote ------------------------------------------------------------------- */
.asl-quote__inner { max-width: 1100px; text-align: center; }
.asl-quote__avatar { width: 65px; height: 65px; border-radius: 50%; margin: 0 auto 30px; object-fit: cover; }
.asl-quote__text {
	margin: 0 0 36px;
	font-family: var(--f-head); font-weight: 600;
	font-size: 46px; line-height: 1.2; letter-spacing: -0.02em; color: var(--c-title);
}
.asl-quote__name { margin: 0 0 4px; }
.asl-quote__role { font-size: 15px; line-height: 20px; }

/* Big scrolling word ------------------------------------------------------------ */
.asl-bigword { overflow: hidden; padding: 0 0 40px; }
.asl-bigword__track { display: flex; gap: .3em; white-space: nowrap; will-change: transform; }
.asl-bigword span {
	font-family: var(--f-head); font-weight: 600;
	font-size: 12.86vw; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
	color: var(--c-title);
}

/* Masonry gallery ---------------------------------------------------------- */
.asl-masonry { columns: 3; column-gap: 20px; }
.asl-masonry__item { display: block; margin-bottom: 20px; break-inside: avoid; overflow: hidden; border-radius: 6px; }
.asl-masonry__item img { width: 100%; transition: transform .8s var(--ease); }
.asl-masonry__item:hover img { transform: scale(1.05); }

/* Testimonials ------------------------------------------------------------- */
.asl-reviews__title { max-width: 850px; margin-bottom: 80px; }
.asl-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; }
.asl-review { display: flex; flex-direction: column; }
.asl-stars { display: flex; gap: 2px; color: var(--c-star); font-size: 16px; margin-bottom: 18px; }
.asl-review__title { margin-bottom: 18px; }
.asl-review__text { flex: 1; margin-bottom: 34px; }
.asl-review__person { display: flex; align-items: center; gap: 16px; }
.asl-review__person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.asl-review__person h6 { margin: 0; font-size: 17px; }
.asl-review__person p { margin: 0; font-size: 14px; line-height: 1.4; }

/* CTA ---------------------------------------------------------------------- */
.asl-cta {
	position: relative;
	padding: 130px 0;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.asl-cta::before { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 35, .45); }
.asl-cta__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.asl-cta__title { max-width: 730px; margin: 0; color: #fff; }

/* Footer -------------------------------------------------------------------- */
.asl-footer { padding: 110px 0 0; }
.asl-footer__top {
	display: grid;
	grid-template-columns: 40% 60%;
	align-items: end;
	padding-bottom: 50px;
}
.asl-footer__logo img { height: 80px; width: auto; margin-bottom: 30px; }
.asl-footer__brand p { max-width: 300px; font-size: 15px; line-height: 1.6; }
.asl-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.asl-footer h5 { margin-bottom: 24px; }
.asl-footer h6 { margin: 0 0 4px; font-size: 17px; }
.asl-footer__col p { margin-bottom: 22px; font-size: 15px; line-height: 1.6; max-width: 300px; }
.asl-footer__col p a { color: var(--c-text); }
.asl-footer__col p a:hover { color: var(--c-link); }
.asl-footer__links li + li { margin-top: 10px; }
.asl-footer__links a { color: var(--c-text); font-size: 15px; }
.asl-footer__links a:hover { color: var(--c-link); }
.asl-footer__bottom { border-top: 1px solid var(--c-bd); padding: 30px 0; text-align: center; font-size: 14px; }

/* Floating buttons ---------------------------------------------------------- */
.asl-whatsapp {
	position: fixed; right: 20px; bottom: 100px; z-index: 90;
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
	background: #25d366; color: #fff; font-size: 30px;
	box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
	transition: transform .3s var(--ease);
}
.asl-whatsapp:hover { color: #fff; transform: scale(1.08); }
.asl-totop {
	position: fixed; right: 24px; bottom: 30px; z-index: 90;
	display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--c-title); color: #fff; font-size: 18px;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .3s var(--ease);
}
.asl-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.asl-totop:hover { background: var(--c-link); }

/* Lightbox ------------------------------------------------------------------ */
.asl-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(15, 14, 20, .92); padding: 60px;
}
.asl-lightbox[hidden] { display: none; }
.asl-lightbox img { max-height: 88vh; max-width: 90vw; width: auto; border-radius: 6px; }
.asl-lightbox button {
	position: absolute; display: grid; place-items: center; width: 48px; height: 48px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px;
}
.asl-lightbox button:hover { background: rgba(255, 255, 255, .25); }
.asl-lightbox__close { top: 20px; right: 20px; }
.asl-lightbox__prev { left: 20px; top: 50%; margin-top: -24px; }
.asl-lightbox__next { right: 20px; top: 50%; margin-top: -24px; }

/* About page ---------------------------------------------------------------- */
.asl-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.asl-about__main img { width: 100%; border-radius: var(--radius); aspect-ratio: 615 / 760; object-fit: cover; }
.asl-about__content { padding-top: 20px; }
.asl-about__content .asl-text { margin-bottom: 50px; font-size: 16px; }
.asl-about__second img { width: 100%; border-radius: var(--radius); aspect-ratio: 615 / 360; object-fit: cover; }

.asl-process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.asl-process__intro { align-self: stretch; }
.asl-process__sticky { position: sticky; top: calc(var(--header-h) + 60px); }
.asl-process__sticky .asl-text { margin-bottom: 34px; max-width: 560px; }
.asl-process__steps { display: flex; flex-direction: column; gap: 30px; }
.asl-step {
	position: sticky;
	top: calc(var(--header-h) + 40px + var(--i) * 20px);
	padding: 40px 40px 34px;
	border: 1px solid var(--c-bd);
	border-radius: var(--radius);
	background: #fff;
	min-height: 300px;
}
.asl-step .asl-label { margin-bottom: 30px; }
.asl-step__title { margin-bottom: 10px; }
.asl-step__icon { width: 48px; height: 48px; margin-top: 30px; }

.asl-band { padding: 60px 0 120px; overflow: hidden; }
.asl-band__strip {
	width: 110%; margin-left: -5%;
	background: var(--c-blue); color: #fff;
	transform: rotate(-3deg);
	padding: 34px 0;
}
.asl-band__track { display: flex; width: max-content; animation: asl-marquee 40s linear infinite; }
.asl-band__track span {
	padding-right: 80px;
	font-family: var(--f-head); font-weight: 600; font-size: 72px; line-height: 1.1; letter-spacing: -0.02em;
	white-space: nowrap;
}
@keyframes asl-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .asl-band__track { animation: none; } }

.asl-statement { padding-top: 40px; }
.asl-statement__text {
	margin: 0; text-align: center;
	font-size: 72px; line-height: 1.2; letter-spacing: -0.03em;
}
.asl-statement__text u { text-decoration-thickness: 3px; text-underline-offset: 8px; }
.asl-statement__img {
	display: inline-block; vertical-align: middle;
	width: 1.9em; height: .95em; margin: -10px 4px 0;
	border-radius: 15px; background-size: cover; background-position: center;
}

/* Services page ------------------------------------------------------------- */
.asl-pagehead { padding-bottom: 70px; }
.asl-pagehead .asl-h1 { margin-bottom: 30px; }
.asl-pagehead__text { max-width: 830px; margin: 0 auto; }
.asl-srow {
	display: grid;
	grid-template-columns: 67.5fr 32.5fr;
	gap: 20px;
	margin-bottom: 20px;
}
.asl-srow__media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; border-radius: var(--radius); }
.asl-srow__card { padding: 40px; border-radius: var(--radius); background: var(--c-bg-2); }
.asl-srow__title { margin-bottom: 6px; }
.asl-srow__sub { font-size: 14px; margin-bottom: 30px; }
.asl-checklist { margin-top: 26px; }
.asl-checklist li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--c-title); }
.asl-checklist li + li { margin-top: 8px; }
.asl-checklist .asl-ico { color: var(--c-title); }

/* Contact info + form ------------------------------------------------------- */
.asl-cinfo__grid { display: grid; grid-template-columns: 1fr 520px; gap: 60px; align-items: start; }
.asl-cinfo__title { font-size: 35px; margin-bottom: 40px; }
.asl-iconlist li { display: flex; gap: 16px; align-items: flex-start; }
.asl-iconlist li + li { margin-top: 18px; }
.asl-iconlist .asl-ico {
	width: 28px; height: 28px; flex: 0 0 28px; padding: 6px; margin-top: -1px;
	border-radius: 50%; background: var(--c-blue); color: #fff;
}
.asl-iconlist a { color: inherit; }
.asl-iconlist a:hover { color: var(--c-link); }
.asl-iconlist span { max-width: 420px; }
.asl-cinfo--dark {
	position: relative;
	padding: 170px 0;
	background-size: cover; background-position: center;
	color: var(--c-alt-text);
}
.asl-cinfo--dark::before { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 35, .55); }
.asl-cinfo--dark .asl-container { position: relative; }
.asl-cinfo--dark .asl-cinfo__grid { align-items: center; }
.asl-cinfo--dark .asl-cinfo__title { font-size: 57px; letter-spacing: -0.03em; color: #fff; }
.asl-cinfo--dark .asl-split__title { color: #fff; }
.asl-cinfo--dark .asl-iconlist { color: #fff; }

.asl-map__frame { margin-top: 20px; border-radius: var(--radius); overflow: hidden; height: 480px; background: var(--c-bg-2); }
.asl-map__frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2); }

/* Products page ------------------------------------------------------------- */
.asl-products-page { background: var(--c-bg-2); }
.asl-products-page .asl-h1 { margin-bottom: 30px; }
.asl-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.asl-catgrid__img { display: block; background: #fff; overflow: hidden; }
.asl-catgrid__img img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .6s var(--ease); }
.asl-catgrid a:hover img { transform: scale(1.05); }
.asl-catgrid__name { margin: 18px 0 0; font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--c-title); letter-spacing: 0; }
.asl-catgrid__name mark { background: none; color: inherit; }

/* Projects ------------------------------------------------------------------ */
.asl-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; }
.asl-pcard__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-2); aspect-ratio: 4 / 3; }
.asl-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.asl-pcard:hover .asl-pcard__media img { transform: scale(1.06); }
.asl-pcard__body { padding-top: 24px; }
.asl-pcard__title { font-size: 22px; line-height: 1.3; margin-bottom: 10px; }
.asl-pcard__title a { color: var(--c-title); }
.asl-pcard__title a:hover { color: var(--c-link); }
.asl-pcard__text { font-size: 15px; margin-bottom: 14px; }
.asl-pagination { margin-top: 60px; text-align: center; }
.asl-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; margin: 0 3px; border-radius: 50%; color: var(--c-title); }
.asl-pagination .page-numbers.current, .asl-pagination a.page-numbers:hover { background: var(--c-link); color: #fff; }

/* Single project ------------------------------------------------------------ */
.asl-single { padding-top: 90px; }
.asl-single__inner { max-width: calc(860px + var(--gutter) * 2); }
.asl-single__title { text-align: center; font-size: 30px; letter-spacing: 0; margin-bottom: 30px; }
.asl-slider { position: relative; margin-bottom: 50px; border-radius: 4px; overflow: hidden; background: var(--c-bg-2); }
.asl-slider__track { display: flex; transition: transform .6s var(--ease); }
.asl-slider__slide { flex: 0 0 100%; }
.asl-slider__slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.asl-slider__nav {
	position: absolute; top: 50%; margin-top: -22px;
	display: grid; place-items: center; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--c-title); font-size: 20px;
}
.asl-slider__prev { left: 16px; }
.asl-slider__next { right: 16px; }
.asl-slider__dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.asl-slider__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.asl-slider__dots button.is-active { background: #fff; }
.asl-dropcap > p:first-child::first-letter {
	float: left; margin: 6px 14px 0 0;
	font-family: var(--f-head); font-weight: 600; font-size: 68px; line-height: .8; color: var(--c-title);
}

/* Generic page --------------------------------------------------------------- */
.asl-page__title { margin-bottom: 50px; }
.asl-page__content { max-width: 900px; }
.asl-page__content h2 { font-size: 35px; margin-top: 1.4em; }
.asl-page__content h3 { font-size: 26px; margin-top: 1.4em; }
.asl-page__content ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.asl-page--woo .asl-page__content { max-width: none; }
.asl-404 { padding: 180px 0; }
.asl-404 .asl-btn { margin-top: 30px; }

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 1279px) {
	h1, .asl-h1 { font-size: 46px; }
	.asl-hero__title { font-size: 50px; }
	.asl-counter__num { font-size: 70px; }
	.asl-quote__text { font-size: 38px; }
	.asl-band__track span, .asl-statement__text { font-size: 56px; }
	.asl-cinfo__grid { grid-template-columns: 1fr 460px; }
}

@media (max-width: 1023px) {
	h1, .asl-h1 { font-size: 40px; }
	h2 { font-size: 36px; }
	h3, .asl-split__title { font-size: 30px; }
	.asl-hero__title { font-size: 40px; }
	.asl-hero__text { font-size: 24px; }
	.asl-headrow, .asl-faq__grid, .asl-about__grid, .asl-process__grid, .asl-cinfo__grid { grid-template-columns: 1fr; gap: 30px; }
	.asl-headrow .asl-label { margin-top: 0; }
	.asl-faq__grid { gap: 40px; }
	.asl-clients__list { grid-template-columns: repeat(3, 1fr); }
	.asl-service-cards__grid { grid-template-columns: repeat(2, 1fr); }
	.asl-scard { min-height: 420px; }
	.asl-counters__grid { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
	.asl-counter__num { font-size: 45px; }
	.asl-split__inner, .asl-split--edge .asl-split__inner { grid-template-columns: 1fr; gap: 40px; }
	.asl-split__media { min-height: 420px; }
	.asl-split--edge .asl-split__media { min-height: 420px; border-radius: 0; }
	.asl-split__form { max-width: none; }
	.asl-split--edge .asl-split__form { max-width: none; padding: 0 var(--gutter) var(--section); }
	.asl-split__title { max-width: none; }
	.asl-quote__text { font-size: 38px; line-height: 1.1; }
	.asl-masonry { columns: 2; }
	.asl-reviews__grid { grid-template-columns: 1fr; gap: 50px; }
	.asl-reviews__title { margin-bottom: 50px; }
	.asl-cta__inner { flex-direction: column; align-items: flex-start; }
	.asl-footer__top { grid-template-columns: 1fr; gap: 50px; }
	.asl-process__sticky { position: static; }
	.asl-band__track span, .asl-statement__text { font-size: 44px; }
	.asl-srow { grid-template-columns: 1fr; }
	.asl-srow__media img { min-height: 0; aspect-ratio: 16 / 10; }
	.asl-catgrid { grid-template-columns: repeat(2, 1fr); }
	.asl-projects { grid-template-columns: repeat(2, 1fr); }
	.asl-cinfo--dark { padding: 110px 0; }
	.asl-cinfo--dark .asl-cinfo__title { font-size: 46px; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }
	h1, .asl-h1 { font-size: 32px; letter-spacing: -0.02em; }
	h2 { font-size: 28px; }
	h3, .asl-split__title, .asl-cinfo__title { font-size: 26px; }
	h4, .asl-scard__title { font-size: 21px; }
	h5 { font-size: 19px; }
	h6 { font-size: 17px; }
	.asl-hero { min-height: 80vh; padding: 80px 0; text-align: center; }
	.asl-hero__title { font-size: 30px; }
	.asl-hero__text { font-size: 18px; }
	.asl-hero .asl-btn { font-size: 12px; padding: 16px 32px; }
	.asl-label { font-size: 12px; margin-bottom: 16px; }
	.asl-stagger { grid-template-columns: 1fr; gap: 20px; }
	.asl-stagger__item img { aspect-ratio: 4 / 3 !important; }
	.asl-clients { padding: 40px 0; }
	.asl-clients__list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.asl-clients__item img { height: 60px; }
	.asl-service-cards { padding: 0 var(--gutter); }
	.asl-service-cards__grid { grid-template-columns: 1fr; }
	.asl-scard { min-height: 280px; }
	.asl-scard__body { padding: 24px; }
	.asl-scard__arrow { opacity: 1; transform: none; flex-basis: 40px; height: 40px; }
	.asl-counters__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
	.asl-counter__num { font-size: 32px; margin-bottom: 14px; }
	.asl-counter__title { font-size: 14px; }
	.asl-acc__head button { font-size: 17px; padding: 20px 0; }
	.asl-acc__body { padding-right: 0; }
	.asl-split__media, .asl-split--edge .asl-split__media { min-height: 280px; }
	.asl-quote__text { font-size: 22px; }
	.asl-masonry { columns: 1; }
	.asl-cta { padding: 90px 0; }
	.asl-cta__inner { align-items: center; text-align: center; }
	.asl-footer { padding-top: 70px; }
	.asl-footer__cols { grid-template-columns: 1fr; gap: 20px; }
	.asl-step { padding: 28px; min-height: 0; top: calc(var(--header-h) + 20px + var(--i) * 12px); }
	.asl-band { padding: 30px 0 70px; }
	.asl-band__strip { padding: 22px 0; }
	.asl-band__track span, .asl-statement__text { font-size: 30px; }
	.asl-statement__img { border-radius: 8px; margin-top: -4px; }
	.asl-srow__card { padding: 28px; }
	.asl-catgrid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.asl-projects { grid-template-columns: 1fr; }
	.asl-cinfo--dark { padding: 80px 0; }
	.asl-cinfo--dark .asl-cinfo__title { font-size: 34px; }
	.asl-field--half { flex-basis: 100%; }
	.asl-map__frame { height: 340px; }
	.asl-single__title { font-size: 24px; }
	.asl-whatsapp { right: 16px; bottom: 84px; width: 48px; height: 48px; font-size: 26px; }
	.asl-totop { right: 18px; bottom: 24px; }
	.asl-lightbox { padding: 20px; }
}
