/* ==========================================================================
   Light Star — main stylesheet
   Design reference: Antra (home 1 / home 6). Values measured from the demo at 1440px.
   ========================================================================== */

:root {
	font-synthesis-weight: none;
	/* Brand (Light Star identity: logo + business card) — navy, logo red, white */
	--ls-accent: #ed2926;        /* logo red */
	--ls-accent-hover: #c91d1a;
	--ls-accent-ink: #fff;       /* text on accent */

	/* Neutrals */
	--ls-bg: #f5f6f8;          /* cool white */
	--ls-surface: #fff;
	--ls-surface-2: #e7eaf0;    /* light grey */
	--ls-ink: #0a1527;          /* logo navy */
	--ls-text: #4f5668;
	--ls-dark: #0a1527;         /* logo navy */
	--ls-accent-muted: #b0403d; /* muted red for decorative lines */
	--ls-line: rgba(10, 21, 39, .12);
	--ls-line-light: rgba(255, 255, 255, .22);

	/* Type: Tajawal (Arabic) + Cal Sans (Latin headings) and Golos Text (Latin text), as in Antra. Cal Sans has one weight: no faux bold */
	--ls-font-display: "Cal Sans", "Tajawal", system-ui, sans-serif;
	--ls-font-body: "Golos Text", "Tajawal", system-ui, sans-serif;

	/* Layout */
	--ls-gutter: 30px;
	--ls-container: 1380px;
	--ls-header-h: 100px;
	--ls-radius: 20px;
	--ls-ease: cubic-bezier(.22, 1, .36, 1);
	--ls-ease-2: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ls-bg);
	color: var(--ls-text);
	font: 400 16px/1.75 var(--ls-font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--ls-ink);
	font-family: var(--ls-font-display);
	font-weight: 600;
	line-height: 1.3;
}
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; cursor: pointer; }
.container { width: 100%; max-width: var(--ls-container); margin-inline: auto; padding-inline: var(--ls-gutter); }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ls-accent); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 3px; }

/* ---------- Buttons & small pieces ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 50px; padding: 0 28px;
	border: 0; border-radius: 999px;
	font: 500 15px/1 var(--ls-font-display);
	white-space: nowrap;
	transition: background-color .3s var(--ls-ease), color .3s var(--ls-ease), transform .3s var(--ls-ease);
}
.btn--accent { background: var(--ls-accent); color: var(--ls-accent-ink); }
.btn--accent:hover { background: var(--ls-accent-hover); }

.icon-btn {
	display: inline-grid; place-items: center;
	width: 46px; height: 46px; padding: 0;
	border: 1px solid var(--ls-line-light); border-radius: 50%;
	background: rgba(255, 255, 255, .08); color: #fff;
	transition: background-color .3s var(--ls-ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .18); }

.eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font: 600 13px/1.4 var(--ls-font-display);
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ls-ink);
}
.eyebrow::before { content: ""; width: 35px; height: 1px; background: var(--ls-accent); transform-origin: right; transition: transform .8s var(--ls-ease); }
.eyebrow--light { color: rgba(255, 255, 255, .9); }
/* Inside revealed blocks the line draws first, then the label fades in */
.js [data-reveal]:not(.is-in) .eyebrow::before, .js .eyebrow[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

/* ---------- Header (smart: transparent → floating glass capsule; hides on scroll down) ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 0; transition: transform .55s var(--ls-ease), padding .45s var(--ls-ease); }
.site-header.is-hidden { transform: translateY(calc(-100% - 20px)); }
.site-header__bar {
	position: relative;
	display: flex; align-items: center; gap: 28px;
	max-width: 100%; height: var(--ls-header-h);
	margin-inline: auto; padding-inline: var(--ls-gutter);
	border: 1px solid transparent; border-radius: 0;
	transition: max-width .55s var(--ls-ease), height .45s var(--ls-ease), border-radius .55s var(--ls-ease), background-color .45s, border-color .45s, box-shadow .45s, padding .45s;
}
.site-header.is-scrolled { padding-top: 12px; }
.site-header.is-scrolled .site-header__bar {
	max-width: min(1320px, calc(100% - 24px)); height: 68px;
	padding-inline: 14px 22px; padding-inline-start: 26px;
	border-color: rgba(255, 255, 255, .09); border-radius: 999px;
	background: rgba(10, 21, 39, .72);
	-webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.site-header__logo img { width: auto; height: 42px; transition: height .45s var(--ls-ease); }
.is-scrolled .site-header__logo img { height: 34px; }
.site-header__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
/* Inner pages: quiet icon group before the phone, separated by a hairline; hidden in the capsule */
.head-socials { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 12px 0 0; padding-inline-end: 14px; margin-inline-end: 4px; list-style: none; border-inline-end: 1px solid rgba(255, 255, 255, .18); }
.head-socials a { display: grid; place-items: center; width: 34px; height: 34px; color: rgba(255, 255, 255, .7); transition: color .3s, transform .3s var(--ls-ease); }
.head-socials a:hover { color: var(--ls-accent); transform: translateY(-2px); }
.is-scrolled .head-socials { display: none; }
/* the header icons need a wide screen; below that they crowded the menu (it wrapped to two lines) */
@media (max-width: 1599px) { .head-socials { display: none; } }
.site-header__progress { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.is-scrolled .site-header__progress { inset: auto calc((100% - min(1320px, calc(100% - 24px))) / 2 + 36px) -1px; opacity: 1; }
.site-header__progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--ls-accent)); transform: scaleX(0); transform-origin: right; }

/* Call button: icon with pulse; number shows on wide screens at the top of the page */
.call-btn { display: flex; align-items: center; gap: 10px; color: #fff; }
.call-btn__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background-color .3s, color .3s; }
.call-btn__icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ls-accent); animation: ls-ping 2.2s ease-out infinite; }
@keyframes ls-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.call-btn:hover .call-btn__icon { background: var(--ls-accent); }
.call-btn__text { display: grid; line-height: 1.3; }
.call-btn__text small { font-size: 12px; opacity: .65; }
.call-btn__text b { font: 500 14px/1.3 var(--ls-font-display); }
.is-scrolled .call-btn__text { display: none; }

/* Quote button: compact outline with the logo's cut corner; red fills in from the reading side */
.quote-btn {
	--cut: 9px;
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 16px 14px;
	color: #fff; font: 500 13.5px/1 var(--ls-font-display); white-space: nowrap;
	background: linear-gradient(var(--ls-accent), var(--ls-accent)) right / 0 100% no-repeat, rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(237, 41, 38, .85);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
	transition: background-size .5s var(--ls-ease);
}
.quote-btn i { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ls-accent); transition: transform .45s var(--ls-ease), color .3s; }
.quote-btn:hover { background-size: 100% 100%, auto; }
.quote-btn:hover i { color: #fff; transform: rotate(-45deg); }

/* Burger: two lines that morph into an X */
.burger { position: relative; display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.burger i { position: absolute; inset-inline-start: 14px; width: 18px; height: 1.8px; border-radius: 2px; background: #fff; transition: transform .4s var(--ls-ease), top .3s, width .3s; }
.burger i:first-child { top: 18px; }
.burger i:last-child { top: 26px; width: 12px; }
.burger:hover i:last-child { width: 18px; }
.burger.is-open i, .nav-open .site-header__burger i { top: 22px; width: 18px; }
.burger.is-open i:first-child, .nav-open .site-header__burger i:first-child { transform: rotate(45deg); }
.burger.is-open i:last-child, .nav-open .site-header__burger i:last-child { transform: rotate(-45deg); }

/* ---------- Navigation (desktop) ---------- */
.nav { position: relative; flex: 1; display: flex; justify-content: center; }
.nav__head, .nav__foot, .nav__sub-toggle { display: none; }
.nav__list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__list > li { position: relative; }
.nav__list > li > a {
	display: flex; align-items: center; gap: 6px;
	height: 42px; padding-inline: 16px; border-radius: 999px; white-space: nowrap;
	font: 400 15px/1 var(--ls-font-display); color: rgba(255, 255, 255, .88);
	transition: color .25s;
}
.nav__list > li > a:hover, .nav__list > .current-menu-item > a, .nav__list > .current-menu-ancestor > a, .nav__list > .current-menu-parent > a { color: #fff; }
.nav__list > .menu-item-has-children > a::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .6; transition: transform .3s; }
.nav__list > .menu-item-has-children:hover > a::after { transform: rotate(225deg); margin-top: 3px; }
/* Logo-line hover (desktop): the logo's little star lights up, then a red line draws under the
   label from the reading side and turns up at its end — the "L" corner of the LS mark.
   The current page keeps the line. */
@media (min-width: 1200px) {
	.nav__list > li > a { position: relative; }
	.nav-label { position: relative; display: inline-block; padding-block: 4px; }
	.nav-label::before, .nav-label::after { content: ""; position: absolute; background: var(--ls-accent); pointer-events: none; }
	.nav-label::before { inset-inline: 0; bottom: -5px; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ls-ease) .05s; }
	.nav-label::after { left: 0; bottom: -5px; width: 2px; height: 11px; transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ls-ease); }
	.nav__list > li > a::before { content: "✦"; position: absolute; top: 5px; right: 7px; font-size: 9px; line-height: 1; color: var(--ls-accent); opacity: 0; transform: scale(0) rotate(-90deg); transition: opacity .3s, transform .5s var(--ls-ease); }
	.nav__list > li > a:hover .nav-label::before, .nav__list > li > a:focus-visible .nav-label::before,
	.nav__list > .current-menu-item > a .nav-label::before, .nav__list > .current-menu-ancestor > a .nav-label::before { transform: scaleX(1); }
	.nav__list > li > a:hover .nav-label::after, .nav__list > li > a:focus-visible .nav-label::after,
	.nav__list > .current-menu-item > a .nav-label::after, .nav__list > .current-menu-ancestor > a .nav-label::after { transform: scaleY(1); transition-delay: .4s; }
	.nav__list > li > a:hover::before, .nav__list > li > a:focus-visible::before,
	.nav__list > .current-menu-item > a::before, .nav__list > .current-menu-ancestor > a::before { opacity: 1; transform: none; }
}
/* Dropdown: dark glass card */
.nav__list .sub-menu {
	position: absolute; top: calc(100% + 14px); inset-inline-start: 0;
	min-width: 230px; margin: 0; padding: 10px; list-style: none;
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
	background: rgba(10, 21, 39, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: top;
	transition: opacity .25s, transform .3s var(--ls-ease), visibility .25s;
}
.nav__list .sub-menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__list .sub-menu a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font: 400 15px/1.4 var(--ls-font-display); color: rgba(255, 255, 255, .8); transition: background-color .2s, color .2s, padding .3s var(--ls-ease); }
.nav__list .sub-menu a::after { content: "←"; opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .3s var(--ls-ease); color: var(--ls-accent); }
.nav__list .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav__list .sub-menu a:hover::after { opacity: 1; transform: none; }

/* Mega menu (desktop) "showroom": numbered names on one side, a large photo stage on the other */
@media (min-width: 1200px) {
	.nav__list .sub-menu.is-mega {
		display: grid; grid-template-columns: 340px 1fr; grid-auto-rows: auto; column-gap: 26px; align-content: start;
		width: min(960px, 80vw); padding: 14px; padding-inline-start: 30px; inset-inline-start: 50%; translate: 50% 0;
		border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; background: rgba(8, 17, 33, .97);
		box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
	}
	[dir="ltr"] .nav__list .sub-menu.is-mega { translate: -50% 0; }
	.sub-menu.is-mega > li { grid-column: 1; }
	.sub-menu.is-mega > li:first-child { margin-top: 12px; }
	/* a service row */
	.sub-menu.is-mega a.mega__row {
		position: relative; display: flex; align-items: baseline; justify-content: flex-start; gap: 16px;
		padding: 13px 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); background: none; color: rgba(255, 255, 255, .42);
		transition: color .35s, padding .45s var(--ls-ease);
	}
	.sub-menu.is-mega a.mega__row::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 0; height: 1px; opacity: 1; transform: none; background: var(--ls-accent); transition: width .6s var(--ls-ease); }
	.sub-menu.is-mega a.mega__row:hover { background: none; }
	.sub-menu.is-mega a.mega__row.is-on { color: #fff; padding-inline-start: 10px; }
	.sub-menu.is-mega a.mega__row.is-on::after { width: 100%; }
	.mega__n { font: 600 12px/1 "Golos Text", sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .35); transition: color .35s; }
	.mega__row.is-on .mega__n { color: var(--ls-accent); }
	.mega__t { display: grid; gap: 5px; }
	.mega__t b { font: 700 21px/1.25 var(--ls-font-display); }
	.mega__t small { font: 600 10px/1 "Golos Text", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .3); }
	.mega__row.is-on .mega__t small { color: rgba(255, 255, 255, .6); }
	/* all services: a quiet link under the list */
	.sub-menu.is-mega a.mega__all { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 0; background: none; color: #fff; font: 600 14px/1 var(--ls-font-display); }
	.sub-menu.is-mega a.mega__all::after { display: none; }
	.sub-menu.is-mega a.mega__all:hover { background: none; color: var(--ls-accent); }
	.mega__all i { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-style: normal; transition: transform .3s var(--ls-ease), border-color .3s; }
	.mega__all:hover i { transform: translateX(-4px); border-color: var(--ls-accent); }
	[dir="ltr"] .mega__all:hover i { transform: translateX(4px); }
	/* the stage */
	.sub-menu.is-mega > li.mega__stage-item { grid-column: 2; min-height: 380px; }
	.sub-menu.is-mega a.mega__stage { position: relative; display: block; height: 100%; padding: 0; overflow: hidden; border-radius: 18px; background: #13213b; }
	.sub-menu.is-mega a.mega__stage::after { display: none; }
	.mega__slide { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .5s, clip-path .9s cubic-bezier(.7, 0, .2, 1); }
	[dir="ltr"] .mega__slide { clip-path: inset(0 100% 0 0); }
	.mega__slide.is-on { z-index: 1; opacity: 1; clip-path: inset(0); }
	.mega__slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 13, 26, .9) 0%, rgba(6, 13, 26, .3) 42%, rgba(6, 13, 26, 0) 68%); }
	.mega__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ls-ease); }
	.mega__slide.is-on .mega__photo { transform: scale(1.02); }
	.mega__cap { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 6px; padding: 26px 28px; color: #fff; }
	.mega__cap > * { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ls-ease); }
	.mega__slide.is-on .mega__cap > * { opacity: 1; transform: none; }
	.mega__slide.is-on .mega__cap > :nth-child(2) { transition-delay: .08s; }
	.mega__slide.is-on .mega__cap > :nth-child(3) { transition-delay: .16s; }
	.mega__slide.is-on .mega__cap > :nth-child(4) { transition-delay: .24s; }
	.mega__cap small { justify-self: start; font: 600 11px/1 "Golos Text", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ls-accent); }
	.mega__cap b { font: 800 30px/1.2 var(--ls-font-display); }
	.mega__line { max-width: 42ch; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
	.mega__cap em { justify-self: start; margin-top: 8px; padding: 9px 18px; border-radius: 999px; background: var(--ls-accent); font: 600 13px/1 var(--ls-font-display); font-style: normal; }
	/* entrance */
	.sub-menu.is-mega > li { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ls-ease); }
	.nav__list li:hover > .sub-menu.is-mega > li, .nav__list li:focus-within > .sub-menu.is-mega > li { opacity: 1; transform: none; }
	.nav__list li:hover > .sub-menu.is-mega > li:nth-child(2) { transition-delay: .04s; }
	.nav__list li:hover > .sub-menu.is-mega > li:nth-child(3) { transition-delay: .08s; }
	.nav__list li:hover > .sub-menu.is-mega > li:nth-child(4) { transition-delay: .12s; }
	.nav__list li:hover > .sub-menu.is-mega > li:nth-child(5) { transition-delay: .16s; }
	.nav__list li:hover > .sub-menu.is-mega > li:nth-child(6) { transition-delay: .2s; }
}
/* phones and tablets: the plain list (no photos) */
@media (max-width: 1199px) {
	.mega__stage-item, .mega__n, .mega__t small, .mega__all i { display: none; }
	.mega__t { display: contents; }
	.mega__t b, .mega__all b { font-weight: 400; }
}
.nav-backdrop { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--ls-line-light); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .3s var(--ls-ease); }
.icon-btn:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 1399px) {
	.call-btn__text { display: none; }
	.nav__list > li > a { padding-inline: 12px; }
}

@media (max-width: 1199px) {
	:root { --ls-header-h: 80px; }
	.burger { display: inline-block; }
	.site-header.is-scrolled .site-header__bar { padding-inline: 20px 8px; }

	/* Off-canvas drawer */
	.nav {
		position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
		display: flex; flex-direction: column; justify-content: flex-start; gap: 26px;
		width: min(380px, 90vw); padding: 22px 24px 28px;
		background: #0b1729; overflow-y: auto;
		transform: translateX(100%);
		transition: transform .55s var(--ls-ease);
	}
	.nav.is-open { transform: none; }
	.nav__head { display: flex; align-items: center; justify-content: space-between; }
	.nav__head .burger { display: inline-block; }
	.nav__head img { height: 34px; width: auto; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .07); opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .5s var(--ls-ease); }
	.nav.is-open .nav__list > li { opacity: 1; transform: none; }
	.nav.is-open .nav__list > li:nth-child(1) { transition-delay: .12s; }
	.nav.is-open .nav__list > li:nth-child(2) { transition-delay: .17s; }
	.nav.is-open .nav__list > li:nth-child(3) { transition-delay: .22s; }
	.nav.is-open .nav__list > li:nth-child(4) { transition-delay: .27s; }
	.nav.is-open .nav__list > li:nth-child(5) { transition-delay: .32s; }
	.nav.is-open .nav__list > li:nth-child(6) { transition-delay: .37s; }
	.nav.is-open .nav__list > li:nth-child(7) { transition-delay: .42s; }
	.nav.is-open .nav__list > li:nth-child(8) { transition-delay: .47s; }
	.nav__list > li > a { flex: 1; height: auto; padding: 18px 0; border-radius: 0; font-size: 20px; font-weight: 500; }
	.nav__list > .menu-item-has-children > a::after { display: none; }
	.nav__sub-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; transition: transform .3s; }
	.nav__sub-toggle[aria-expanded="true"] { transform: rotate(180deg); background: var(--ls-accent); }
	.nav__list .sub-menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 12px; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.nav__list .sub-menu::before { display: none; }
	.nav__list .sub-menu.is-open { display: block; }
	.nav__list .sub-menu a { padding: 10px 14px; font-size: 16px; }
	.nav__foot { display: grid; gap: 14px; margin-top: auto; }
	.nav__foot .btn { width: 100%; }
	.nav__phone { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .8); font: 500 16px/1 var(--ls-font-display); }
	.nav__socials { display: flex; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
	.nav__socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .14); color: #fff; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: background-color .3s, border-color .3s; }
	.nav__socials a:hover { background: var(--ls-accent); border-color: var(--ls-accent); }

	.nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
	.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
	.nav-open { overflow: hidden; }
	/* The drawer lives inside the header: lift the header above the backdrop, and drop the
	   transform/backdrop-filter that would otherwise trap the fixed drawer inside the capsule. */
	.nav-open .site-header { z-index: 70; transform: none; }
	.nav-open .site-header__bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 767px) {
	:root { --ls-header-h: 70px; }
	.site-header__bar { gap: 10px; }
	.site-header__logo img { height: 32px; }
	.is-scrolled .site-header__logo img { height: 28px; }
	.site-header.is-scrolled { padding-top: 8px; }
	.site-header.is-scrolled .site-header__bar { height: 58px; max-width: calc(100% - 16px); padding-inline: 16px 6px; }
	.quote-btn { display: none; }
	.call-btn__icon { width: 42px; height: 42px; }
	.burger { width: 42px; height: 42px; }
	.burger i { inset-inline-start: 12px; }
	.burger i:first-child { top: 16px; } .burger i:last-child { top: 24px; }
	.burger.is-open i, .nav-open .site-header__burger i { top: 20px; }
}

/* ---------- Hero slider (Antra home-2 composition) ----------
   Full-screen; centred label + two-line title (2nd accent in gold) + round CTA; a huge
   translucent word behind; fixed H1/intro with a "next" thumbnail at the bottom corner;
   numbered pager on the side. New photos wipe down over the old one (clip-path). */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; place-items: center;
	height: calc(100vh * var(--z)); height: calc(100svh * var(--z)); min-height: 660px; max-height: 1180px;
	padding: calc(var(--ls-header-h) + 20px) var(--ls-gutter) 170px;
	background: var(--ls-dark);
	color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.hs__media { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.hs__media.is-prev { visibility: visible; z-index: 1; }
.hs__media.is-active { visibility: visible; z-index: 2; }
.hs__img, .hs__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs__video { opacity: 0; transition: opacity 1s ease; }
.hs__video.is-playing { opacity: 1; }
.hero__shade {
	position: absolute; inset: 0; z-index: 3;
	background:
		linear-gradient(to top, rgba(6, 13, 26, .78), rgba(6, 13, 26, 0) 45%),
		radial-gradient(70% 60% at 50% 45%, rgba(6, 13, 26, .35), rgba(6, 13, 26, .15)),
		rgba(6, 13, 26, .22);
}

/* Big translucent word behind the title (changes with the slide) */
.hs__ghosts { position: absolute; inset-inline: 0; bottom: 0; z-index: 0; height: 0; pointer-events: none; }
.hs__ghost {
	position: absolute; inset-inline: 0; bottom: 70px;
	font: 700 clamp(110px, 19vw, 330px)/.9 var(--ls-font-display); text-align: center; white-space: nowrap;
	color: rgba(255, 255, 255, .11);
	opacity: 0; transform: translate3d(-4%, 0, 0);
	transition: opacity .8s ease, transform 1.6s var(--ls-ease);
}
.hs__ghost.is-active { opacity: 1; transform: none; transition-delay: .25s; }

/* Centre: label, title, round CTA */
.hero__content { position: relative; z-index: 1; width: 100%; max-width: 1240px; }
.hs__center { display: grid; justify-items: center; text-align: center; }
.hs__texts { display: grid; width: 100%; }
.hs__text { grid-area: 1 / 1; display: grid; justify-items: center; visibility: hidden; }
.hs__text.is-active, .hs__text.is-leaving { visibility: visible; }
.hs__eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px;
	background: rgba(6, 13, 26, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font: 600 13px/1 var(--ls-font-display); letter-spacing: .03em; color: rgba(255, 255, 255, .92);
	opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s var(--ls-ease);
}
.hs__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-accent); }
.hs__title { margin: 22px 0 0; font: 600 clamp(42px, 6.4vw, 104px)/1.12 var(--ls-font-display); color: #fff; }
.hs__title em { font-style: normal; color: var(--ls-accent); }
.hs__line { display: block; }
/* Each line is wiped in from the reading side (right in Arabic) */
.hs__line > span { display: inline-block; padding-block: .04em; clip-path: inset(-15% 0 -15% 100%); }
.hs__text.is-active .hs__eyebrow { opacity: 1; transform: none; transition-delay: .25s; }
.hs__text.is-active .hs__line > span { clip-path: inset(-15% 0 -15% 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1) calc(.4s + var(--l, 0) * .16s); }
.hs__text.is-leaving { opacity: 0; transform: translateY(-18px); transition: opacity .5s ease, transform .7s var(--ls-ease); }
.hs__text.is-leaving .hs__line > span { clip-path: inset(-15% 0 -15% 0); }
.hs__text.is-leaving .hs__eyebrow { opacity: 1; transform: none; }
/* First paint: the opening slide plays its reveal once the page is ready */
.js .hs:not(.is-ready) .hs__text.is-active .hs__line > span { clip-path: inset(-15% 0 -15% 100%); transition: none; }
.js .hs:not(.is-ready) .hs__text.is-active .hs__eyebrow { opacity: 0; transform: translateY(10px); transition: none; }

.hs__disc {
	position: relative; display: grid; place-items: center;
	width: 120px; height: 120px; margin-top: clamp(26px, 4.5vh, 48px); padding: 18px;
	border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
	background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font: 600 15px/1.35 var(--ls-font-display); color: #fff; text-align: center;
	transition: background-color .4s, border-color .4s, transform .6s var(--ls-ease);
}
.hs__disc:hover { background: var(--ls-accent); border-color: var(--ls-accent); transform: scale(1.06); }

/* Bottom corner: next-slide thumbnail with a progress ring + the fixed H1 and intro */
.hs__foot { position: absolute; bottom: 38px; inset-inline-start: var(--ls-gutter); z-index: 2; display: flex; align-items: center; gap: 18px; max-width: 540px; }
.hs__next { position: relative; flex: none; width: 70px; height: 70px; padding: 5px; border: 0; border-radius: 50%; background: none; }
.hs__next::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.hs__next img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; transition: transform .6s var(--ls-ease); }
.hs__next:hover img { transform: scale(1.08); }
.hs__next img:not([src]), .hs__next img[src=""] { visibility: hidden; }
.hs__next svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.hs__next circle { fill: none; stroke: var(--ls-accent); stroke-width: 2; stroke-dasharray: 207.35; stroke-dashoffset: 207.35; }
.hs.is-timing .hs__next circle { animation: hs-ring var(--hs-ms, 7000ms) linear forwards; }
.hs.is-paused .hs__next circle { animation-play-state: paused; }
@keyframes hs-ring { to { stroke-dashoffset: 0; } }
.hs__h1 { margin: 0 0 4px; font: 600 16px/1.5 var(--ls-font-display); color: #fff; }
.hs__lead { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.hs__intro .link-line { font-size: 14px; }

/* Social rail down the reading side of the hero: vertical labels + icons, a thin line above */
.hs__social { position: absolute; top: 50%; inset-inline-start: var(--ls-gutter); z-index: 2; transform: translateY(-50%); }
.social-rail { display: grid; justify-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.social-rail::before { content: ""; justify-self: center; width: 1px; height: 50px; background: linear-gradient(transparent, rgba(255, 255, 255, .5)); }
.social-rail a { display: grid; justify-items: center; gap: 10px; color: rgba(255, 255, 255, .72); transition: color .3s; }
.social-rail a:hover { color: #fff; }
.social-rail a:hover svg { color: var(--ls-accent); }
.social-rail svg { transition: color .3s; }
.social-rail span { writing-mode: vertical-rl; font: 500 13px/1 var(--ls-font-display); letter-spacing: .02em; }
@media (max-width: 1199px) { .hs__social { display: none; } }

/* Side pager: 01 02 03 04, the active one gets a longer gold line */
.hs__pager { position: absolute; top: 50%; inset-inline-end: var(--ls-gutter); z-index: 2; display: grid; gap: 4px; transform: translateY(-50%); }
.hs__pager button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 34px; padding: 0 4px; border: 0; background: none; color: rgba(255, 255, 255, .5); font: 600 13px/1 "Golos Text", sans-serif; direction: ltr; transition: color .3s; }
.hs__pager button::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .6s var(--ls-ease), background-color .3s; }
.hs__pager button:hover { color: #fff; }
.hs__pager button.is-active { color: #fff; }
.hs__pager button.is-active::before { width: 38px; background: var(--ls-accent); }

/* Outline pill with a gold circle arrow (Antra "Take Counsel") */
.btn-pill {
	display: inline-flex; align-items: center; gap: 16px;
	padding: 6px 6px 6px 6px; padding-inline-start: 26px;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
	font: 500 16px/1 var(--ls-font-display); color: #fff;
	transition: background-color .35s var(--ls-ease), border-color .35s;
}
.btn-pill i {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--ls-accent); color: #fff;
	transition: transform .35s var(--ls-ease);
}
.btn-pill:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-pill--solid { border-color: var(--ls-accent); background: var(--ls-accent); }
.btn-pill--solid i { background: #fff; color: var(--ls-ink); }
.btn-pill--solid:hover { background: var(--ls-accent-hover); border-color: var(--ls-accent-hover); }
/* Secondary text button: underline grows on hover (spec part 40) */
.link-line { position: relative; padding-block: 6px; font: 500 16px/1 var(--ls-font-display); color: #fff; }
.link-line::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: right; transition: transform .5s var(--ls-ease); }
.link-line:hover::after { transform: scaleX(1); }
.btn-pill:hover i { transform: rotate(-45deg); }

/* Motion: the incoming photo wipes down over the previous one while settling from a zoom */
@media (prefers-reduced-motion: no-preference) {
	.hs__media.is-enter { animation: hs-wipe 1.35s cubic-bezier(.77, 0, .18, 1) both; }
	.hs__media.is-active .hs__img { animation: ls-kenburns 9s ease-out both; }
	.hs__center .hs__disc, .hs__foot { animation: ls-rise 1s .5s var(--ls-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
	.hs__line > span, .js .hs:not(.is-ready) .hs__text.is-active .hs__line > span { clip-path: none !important; transition: none !important; }
	.hs__eyebrow, .js .hs:not(.is-ready) .hs__text.is-active .hs__eyebrow { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hs__text.is-leaving { visibility: hidden; }
	.hs__ghost { transition: none; }
}
@keyframes hs-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes ls-kenburns { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(0, 0, 0) scale(1); } }
/* slow zoom runs on the GPU layer: no pixel shimmer on the photos (the kitchen slide shook) */
.hs__img { will-change: transform; backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
	.hs__pager { display: none; }
}
@media (max-width: 767px) {
	:root { --ls-gutter: 16px; }
	.hero { min-height: 600px; padding-bottom: 200px; }
	.hs__title { font-size: clamp(34px, 10vw, 46px); }
	.hs__eyebrow { font-size: 12px; padding: 7px 13px; }
	.hs__disc { width: 96px; height: 96px; font-size: 14px; }
	.hs__ghost { bottom: 150px; font-size: 27vw; }
	/* Keep clear of the floating WhatsApp control in the other bottom corner */
	.hs__foot { bottom: 22px; inset-inline-end: 84px; gap: 12px; align-items: flex-start; }
	.hs__next { width: 58px; height: 58px; padding: 4px; }
	.hs__next img { width: 50px; height: 50px; }
	.hs__h1 { font-size: 14px; }
	.hs__lead { display: none; }
}

/* ==========================================================================
   Sections & components
   ========================================================================== */

/* ---------- Layout helpers ---------- */
.section { position: relative; padding-block: clamp(80px, 9vw, 130px); }
.section--tight { padding-block: clamp(56px, 6vw, 90px); }
.section--dark { background: #0d1a2f; color: rgba(255, 255, 255, .72); }
.section--dark h2, .section--dark h3 { color: #fff; }
.container--narrow { max-width: 900px; }
.center-row { display: flex; justify-content: center; margin-top: 56px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row--center { justify-content: center; }
.btn--dark { background: var(--ls-ink); color: #fff; }
.btn--dark:hover { background: #050b16; }
.btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255, 255, 255, .2); }
.btn--outline { background: transparent; color: var(--ls-ink); border: 1px solid var(--ls-line); }
.btn--outline:hover { border-color: var(--ls-ink); }
.h-display { margin: 18px 0 20px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.25; }
.h-display em, .shead__title em, .about-dark__title em, .vcta__title em, .cta-band__title em, .phero__title em, .nf h1 em { font-style: normal; color: var(--ls-accent); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--ls-font-display); color: var(--ls-ink); }
.link-arrow svg { transition: transform .3s var(--ls-ease); }
.link-arrow:hover svg, a:hover > .link-arrow svg { transform: translateX(-5px); }
.empty { padding: 60px 0; text-align: center; }

/* Architectural line backgrounds (Antra uses faint blueprint sketches) */
.bg-lines { background-image:
	linear-gradient(90deg, transparent calc(50% - .5px), rgba(10, 21, 39, .06) 50%, transparent calc(50% + .5px)),
	linear-gradient(transparent 119px, rgba(10, 21, 39, .045) 120px);
	background-size: 100% 100%, 100% 120px; }
.bg-grid { background-color: #eef0f4; background-image:
	linear-gradient(rgba(10, 21, 39, .05) 1px, transparent 1px),
	linear-gradient(90deg, rgba(10, 21, 39, .05) 1px, transparent 1px);
	background-size: 44px 44px; }

/* Outline pill with round arrow */
.btn-pill--dark { color: var(--ls-ink); border-color: rgba(10, 21, 39, .25); }
.btn-pill--dark:hover { background: var(--ls-ink); border-color: var(--ls-ink); color: #fff; }
.btn-pill--light { color: #fff; }

/* Tags */
.tag { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 2; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font: 500 12px/1.3 var(--ls-font-display); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(0, 0, 0, .15); }
.tag--solid { background: var(--ls-accent); border-color: var(--ls-accent); }

/* ---------- Section head (eyebrow + big title) ---------- */
.shead { margin-bottom: clamp(40px, 5vw, 70px); }
.shead--split { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 30px; align-items: start; }
.shead--split .eyebrow { justify-self: start; margin-top: 12px; }
.shead--center { text-align: center; display: grid; justify-items: center; }
.shead--center .shead__lead { margin-inline: auto; }
.shead--start .eyebrow { margin-bottom: 20px; }
.shead__title { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.22; }
.shead__lead { max-width: 640px; margin: 22px 0 0; font-size: 16px; }
.shead .eyebrow--light + .shead__body .shead__title, .section--dark .shead__title { color: #fff; }

/* ---------- Intro: huge years number filled with service photos + ribbon ---------- */
.intro__head { grid-template-columns: minmax(260px, 1.05fr) 3fr; gap: clamp(30px, 4vw, 60px); }
.intro__lead { max-width: 720px; font-size: 18px; line-height: 1.9; }
.intro__lead strong { font: 700 21px/1 var(--ls-font-display); color: var(--ls-ink); }
.intro__side { display: grid; gap: 22px; align-content: start; justify-items: start; }
.intro__side .eyebrow { margin-top: 12px; }
.years { position: relative; display: grid; justify-items: start; }
.years__num { position: relative; font: 700 clamp(150px, 15vw, 240px)/.82 "Cal Sans", sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.years__outline { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(10, 21, 39, .18); }
/* Each copy shows one service photo through the digits; they take turns (Corian → kitchen → Compact) */
.years__fill {
	position: absolute; inset: 0;
	background: var(--img) center / cover; -webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: 0; animation: years-swap 9s calc(var(--n) * 3s) infinite;
}
@keyframes years-swap { 0%, 100% { opacity: 0; background-position: 50% 30%; } 8%, 33% { opacity: 1; } 41% { opacity: 0; background-position: 50% 70%; } }
/* Ribbon under the number: navy strip with the logo's cut corner and a red end block */
.years__ribbon {
	--cut: 12px;
	display: flex; align-items: stretch; margin-top: 10px;
	font: 500 15px/1 "Tajawal", sans-serif; color: #fff;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.years__ribbon b { padding: 13px 20px; background: var(--ls-accent); font-weight: 700; }
.years__ribbon span { padding: 13px 20px; background: var(--ls-dark); color: rgba(255, 255, 255, .85); font-family: "Golos Text", "Tajawal", sans-serif; }
/* Enter: the number rises out of a mask, the ribbon slides in after it */
.js .intro__head:not(.is-in) .years__num > * { transform: translateY(40%); opacity: 0; }
.years__num > * { transition: transform 1.1s var(--ls-ease), opacity .8s; }
.js .intro__head:not(.is-in) .years__ribbon { transform: translateX(30px); opacity: 0; }
.years__ribbon { transition: transform 1s var(--ls-ease) .5s, opacity .8s .5s; }
@media (prefers-reduced-motion: reduce) { .years__fill { animation: none; } .years__outline + .years__fill { opacity: 1; } }

/* Bands behind the number: three broad strips with the logo's 45° cuts, photos drifting inside */
.years__bands { position: absolute; top: 4%; inset-inline: -18px -40px; height: 70%; display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; pointer-events: none; }
.years__bands i {
	--cut: 26px;
	display: block; margin-inline-start: calc(var(--n) * 22px);
	background: var(--img) 0 50% / 180% auto; opacity: .16; filter: grayscale(.3);
	clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
	animation: years-drift 22s linear infinite alternate; animation-delay: calc(var(--n) * -6s);
}
@keyframes years-drift { to { background-position: 100% 50%; } }
.years__num { z-index: 1; }

/* Suspense on the last numbers, then a burst on the final one */
.years.is-near .years__num { animation: years-tense .5s ease-in-out infinite alternate; }
@keyframes years-tense { from { transform: scale(1); } to { transform: scale(1.035); } }
.years.is-burst .years__num { animation: years-pop .9s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes years-pop { 0% { transform: scale(.86); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.years__burst { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
/* shock ring */
.years__burst::before { content: ""; position: absolute; top: -60px; left: -60px; width: 120px; height: 120px; border: 2px solid var(--ls-accent); border-radius: 50%; opacity: 0; }
.years.is-burst .years__burst::before { animation: years-ring 1s var(--ls-ease) both; }
@keyframes years-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }
/* rays */
.years__burst i { position: absolute; top: -1px; left: 0; width: 70px; height: 3px; background: linear-gradient(90deg, var(--ls-accent), transparent); transform-origin: 0 50%; opacity: 0; }
.years__burst i:nth-child(1) { --a: 0deg; } .years__burst i:nth-child(2) { --a: 30deg; } .years__burst i:nth-child(3) { --a: 60deg; }
.years__burst i:nth-child(4) { --a: 90deg; } .years__burst i:nth-child(5) { --a: 120deg; } .years__burst i:nth-child(6) { --a: 150deg; }
.years__burst i:nth-child(7) { --a: 180deg; } .years__burst i:nth-child(8) { --a: 210deg; } .years__burst i:nth-child(9) { --a: 240deg; }
.years__burst i:nth-child(10) { --a: 270deg; } .years__burst i:nth-child(11) { --a: 300deg; } .years__burst i:nth-child(12) { --a: 330deg; }
.years__burst i:nth-child(even) { width: 44px; background: linear-gradient(90deg, var(--ls-ink), transparent); }
.years.is-burst .years__burst i { animation: years-ray .95s var(--ls-ease) both; }
@keyframes years-ray {
	0% { opacity: 1; transform: rotate(var(--a)) translateX(40px) scaleX(.1); }
	60% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scaleX(1); }
}
/* the ribbon lands with the burst */
.years.is-burst .years__ribbon b { animation: years-flash .8s ease both; }
@keyframes years-flash { 0% { background: #fff; color: var(--ls-accent); } 100% { background: var(--ls-accent); color: #fff; } }

/* "Starlight" sky behind the block: small red logo stars twinkling like a starlit headliner */
.intro { overflow: hidden; }
.intro > .container { position: relative; z-index: 1; }
.starlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.starlight i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; animation: star-twinkle var(--t) ease-in-out var(--d) infinite; }
.starlight svg { display: block; width: 100%; height: 100%; fill: var(--ls-accent); filter: drop-shadow(0 0 2px rgba(237, 41, 38, .35)); }
/* Side glint: a thin horizontal flare that sweeps across the star as it lights up */
.starlight i.is-glint::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--s) * 5); height: 1px; margin: -.5px 0 0 calc(var(--s) * -2.5); background: linear-gradient(90deg, transparent, rgba(237, 41, 38, .9), transparent); transform: scaleX(0); animation: star-glint var(--t) ease-in-out var(--d) infinite; }
@keyframes star-twinkle {
	0%, 100% { opacity: 0; transform: translateX(0) scale(.3) rotate(0deg); }
	45% { opacity: .9; transform: translateX(calc(var(--dx) * .5)) scale(1) rotate(45deg); }
	60% { opacity: .75; transform: translateX(calc(var(--dx) * .6)) scale(.9) rotate(60deg); }
	80% { opacity: 0; transform: translateX(var(--dx)) scale(.4) rotate(90deg); }
}
@keyframes star-glint { 0%, 30%, 70%, 100% { transform: scaleX(0); opacity: 0; } 45% { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .starlight i { animation: none; opacity: .35; } .starlight i::before { display: none; } }
@media (max-width: 767px) {
	.intro__head { grid-template-columns: 1fr; }
	.years__num { font-size: 150px; }
}

/* ---------- Intro cards ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fcard { padding: 26px 24px 28px; border-radius: 18px; background: var(--ls-surface); transition: transform .4s var(--ls-ease), box-shadow .4s; }
.fcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, .07); }
.fcard__top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--ls-line); }
.fcard__title { font-size: 22px; line-height: 1.35; }
.fcard__icon { color: var(--ls-accent); flex: none; }
.fcard p { margin: 0; font-size: 15px; }

/* ---------- Dark about ---------- */
.about-dark { overflow: hidden; background: radial-gradient(120% 90% at 100% 0, #1a2a45 0, #0d1a2f 55%, #0a1527 100%); color: rgba(255, 255, 255, .72); }
.about-dark__watermark { position: absolute; bottom: -.18em; inset-inline-start: 50%; transform: translateX(50%); font: 700 clamp(120px, 17vw, 280px)/1 var(--ls-font-display); color: rgba(255, 255, 255, .035); white-space: nowrap; pointer-events: none; direction: ltr; }
.about-dark__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about-dark__title { margin: 22px 0 30px; font-size: clamp(32px, 4vw, 58px); line-height: 1.25; color: #fff; }
.checks { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.checks--2 { grid-template-columns: 1fr 1fr; }
.checks li { display: flex; align-items: center; gap: 10px; font: 500 16px/1.4 var(--ls-font-display); color: #fff; }
.checks svg { color: var(--ls-accent); flex: none; }
/* Founder quote: cut-corner card, big faint red quote mark, framed portrait, red rule by the quote */
.founder {
	--cut: 22px;
	position: relative; overflow: hidden; display: flex; gap: 22px; align-items: center;
	margin: 30px 0 34px; padding: 26px 28px;
	background: linear-gradient(120deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.founder::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.founder__q { position: absolute; top: -34px; inset-inline-end: 14px; font: 700 150px/1 Georgia, serif; color: var(--ls-accent); opacity: .16; pointer-events: none; }
.founder__frame { flex: none; }
.founder__photo { display: block; width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
.founder blockquote { position: relative; margin: 0; padding-inline-start: 20px; }
.founder blockquote::before { content: ""; position: absolute; top: 4px; bottom: 4px; inset-inline-start: 0; width: 2px; background: var(--ls-accent); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ls-ease) .6s; }
.is-in .founder blockquote::before, .founder blockquote:hover::before { transform: scaleY(1); }
.founder blockquote p { margin: 0 0 12px; font: 500 17px/1.75 var(--ls-font-display); color: #fff; }
.founder figcaption { display: flex; align-items: center; gap: 10px; }
.founder figcaption b { color: #fff; font: 700 15px/1 var(--ls-font-display); }
.founder figcaption span { position: relative; padding-inline-start: 12px; font-size: 13px; color: var(--ls-accent); }
.founder figcaption span::before { content: ""; position: absolute; top: 50%; inset-inline-start: 0; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.about-dark__media { position: relative; }
.about-dark__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 26px; }
/* Years badge: a square with two 45° cut corners, like the LS mark, plus the logo's small star */
.about-dark__badge {
	--cut: 22px;
	position: absolute; bottom: -34px; inset-inline-end: 34px;
	display: grid; align-content: center; justify-items: center; gap: 10px;
	width: 150px; height: 150px;
	background: var(--ls-accent); color: #fff; text-align: center;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.about-dark__badge::before { content: "✦"; position: absolute; top: 12px; left: 14px; font-size: 13px; line-height: 1; }
.about-dark__badge b { display: flex; align-items: flex-start; font: 700 54px/.9 "Cal Sans", sans-serif; letter-spacing: -.02em; }
.about-dark__badge sup { margin-inline-end: 2px; font-size: 26px; line-height: 1; top: 0; }
.about-dark__badge > span { position: relative; padding-top: 10px; font: 500 15px/1.2 "Tajawal", sans-serif; }
.about-dark__badge > span::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 1.5px; margin-left: -13px; background: rgba(255, 255, 255, .7); }

/* ---------- Services list (hover swaps photo) ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: stretch; }
.svc__media { position: relative; min-height: 520px; border-radius: 26px; overflow: hidden; background: #dde1e8; }
.svc__img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.svc__img.is-active { opacity: 1; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ls-ease); }
.svc__img.is-active img { transform: none; }
.svc__img figcaption { position: absolute; bottom: 22px; inset-inline-start: 22px; max-width: 360px; padding: 20px 22px; border-radius: 16px; background: rgba(20, 32, 54, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 15px; line-height: 1.7; }
.svc__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(237, 41, 38, .6); }
.svc__list li, .team__list li { border-bottom: 1px solid var(--ls-line); }
.svc__list a, .team__list li { display: flex; align-items: center; gap: 22px; padding: 26px 0; cursor: pointer; }
.svc__num { font: 500 13px/1 var(--ls-font-display); color: #9aa1ae; min-width: 22px; }
.svc__title { flex: 1; font: 600 clamp(20px, 2vw, 28px)/1.3 var(--ls-font-display); color: var(--ls-ink); transition: color .3s; }
.svc__arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--ls-ink); transition: background-color .3s, color .3s, transform .3s var(--ls-ease); }
.svc__list li.is-active .svc__title, .team__list li.is-active .team__name { color: var(--ls-accent); }
.svc__list li.is-active .svc__arrow, .team__list li.is-active .svc__arrow { background: var(--ls-accent); color: #fff; }

/* ---------- Process steps (staggered) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.step { position: relative; overflow: hidden; padding: 10px 10px 26px; border-radius: 20px; background: var(--ls-surface); box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.step:nth-child(2) { margin-top: 36px; }
.step:nth-child(3) { margin-top: 72px; }
.step:nth-child(4) { margin-top: 108px; }
.step__img { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; margin-bottom: 20px; }
.step__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ls-ease); }
.step:hover .step__img img { transform: scale(1.06); }
.step h3 { padding-inline: 12px; font-size: 21px; }
.step h3 span { color: var(--ls-accent); }
.step p { position: relative; z-index: 1; margin: 12px 0 0; padding-inline: 12px; font-size: 15px; }
.step__bignum { position: absolute; bottom: -8px; inset-inline-end: 14px; font: 700 76px/1 var(--ls-font-display); color: #e8ebf0; }
.process__foot { margin: 70px 0 0; text-align: center; }
/* Small LS marks in the brand red, scattered over the empty part of the process block;
   they take turns: each fades in, drifts a little and fades out (7 marks × 2s offsets). */
.process { overflow: hidden; }
.process > .container { position: relative; z-index: 1; }
.mark-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mark-field__m { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); fill: var(--ls-accent); opacity: 0; animation: mark-blink 14s ease-in-out calc(var(--n) * -2s) infinite; }
@keyframes mark-blink {
	0%, 100% { opacity: 0; transform: translateY(8px) scale(.85); }
	12% { opacity: .2; transform: none; }
	26% { opacity: .2; transform: translateY(-4px); }
	38% { opacity: 0; transform: translateY(-10px) scale(.9); }
}
@media (max-width: 767px) { .mark-field__m:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .mark-field__m { animation: none; opacity: .1; } }
.process__foot a { color: var(--ls-accent); font-weight: 600; }

/* ---------- Project cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pgrid--stagger .pcard:nth-child(3n+2) { margin-top: 40px; }
.pcard__link { display: block; }
.pcard__img { position: relative; overflow: hidden; aspect-ratio: 4 / 4.6; border-radius: 22px; background: #dde1e8; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ls-ease); }
.pcard:hover .pcard__img img { transform: scale(1.07); }
.pcard__title { margin: 20px 0 6px; font-size: 24px; transition: color .3s; }
.pcard:hover .pcard__title { color: var(--ls-accent); }
.pcard__meta { margin: 0; font-size: 14px; }
.pcard.is-hidden { display: none; }

/* ---------- Testimonials ---------- */
.testi { background: var(--ls-surface-2); }
.testi__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.testi__photo img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 24px; }
.testi__score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--ls-line); }
.testi__score b { font: 600 56px/1 var(--ls-font-display); color: var(--ls-ink); direction: ltr; }
.stars { display: inline-flex; gap: 2px; padding: 5px 10px; border-radius: 999px; background: var(--ls-accent); color: #fff; }
.testi__slides { position: relative; display: grid; }
.testi__item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s, transform .6s var(--ls-ease), visibility .6s; }
.testi__item.is-active { opacity: 1; visibility: visible; transform: none; }
.testi__q { color: var(--ls-accent); }
.testi__item blockquote { margin: 14px 0 24px; font: 500 clamp(19px, 1.8vw, 24px)/1.7 var(--ls-font-display); color: var(--ls-ink); }
.testi__item figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ls-ink); color: var(--ls-accent); font: 600 20px/1 var(--ls-font-display); }
.testi__item figcaption b { font: 600 18px/1.3 var(--ls-font-display); color: var(--ls-ink); }
.rotator-dots { display: flex; gap: 8px; margin-top: 30px; }
.rotator-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: #c9ced8; transition: width .3s, background-color .3s; }
.rotator-dots button.is-active { width: 30px; background: var(--ls-accent); }

/* ---------- Clients marquee ---------- */
.clients { padding-block: 60px 70px; background: var(--ls-surface-2); }
.clients__title { display: flex; align-items: center; gap: 20px; margin: 0 0 40px; font: 600 17px/1.4 var(--ls-font-display); color: var(--ls-ink); text-align: center; }
.clients__title::before, .clients__title::after { content: ""; flex: 1; height: 1px; background: var(--ls-line); }
.marquee { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #050b16 8%, #050b16 92%, transparent); mask-image: linear-gradient(90deg, transparent, #050b16 8%, #050b16 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: ls-marquee 55s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__item { display: grid; place-items: center; width: 190px; height: 70px; padding-inline: 26px; }
.marquee__item img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s; }
.marquee__item:hover img { filter: none; opacity: 1; }
@keyframes ls-marquee { to { transform: translateX(-50%); } }

/* ---------- Team (home list) ---------- */
.team__wrap { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.team__photos { position: relative; aspect-ratio: 4 / 4.8; border-radius: 24px; overflow: hidden; background: #dde1e8; }
.team__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ls-line); }
.team__list li { padding: 22px 0; outline-offset: -2px; }
.team__name { flex: 1; font: 600 clamp(19px, 2vw, 27px)/1.3 var(--ls-font-display); color: var(--ls-ink); transition: color .3s; }
.team__role { font: 500 13px/1.4 var(--ls-font-display); color: #737a8a; }

/* ---------- Team carousel (home) ---------- */
.team__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(36px, 4vw, 56px); }
.team__head .shead { flex: 1; margin-bottom: 0; }
.team__arrows { display: flex; gap: 10px; flex: none; }
.team__arrow { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1px solid var(--ls-line); border-radius: 50%; background: transparent; color: var(--ls-ink); transition: background-color .3s, border-color .3s, color .3s; }
.team__arrow:hover { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.team__arrow[data-car-prev] svg { transform: rotate(180deg); }
.team__arrow:disabled { opacity: .35; pointer-events: none; }
.team-car__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
	margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	cursor: grab;
}
.team-car__track::-webkit-scrollbar { display: none; }
.team-car__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tslide { scroll-snap-align: start; }
/* Portrait card with the logo's cut corners; name + role over the photo */
.tslide__card {
	--cut: 26px;
	position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #dde1e8;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.tslide__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1s var(--ls-ease); }
/* Star AI's card: one of the team, dark with its own glow; the whole card opens the assistant */
.tslide__card--ai { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; text-align: start; background: radial-gradient(ellipse 70% 55% at 50% 42%, #1c3566 0%, #0a1527 62%, #060d1a 100%); }
.tslide__card--ai img { position: absolute; inset: 6% 10% 24%; width: 80%; height: 70%; object-fit: contain; }
.tslide__ai-tag { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 1; padding: 4px 10px; border: 1px solid rgba(237, 41, 38, .6); border-radius: 999px; font: 700 11px/1 "Golos Text", sans-serif; letter-spacing: .14em; color: #ff6a63; }
.tslide__card--ai .tslide__ai-cap { position: absolute; inset: auto 0 0; display: grid; justify-items: start; gap: 6px; padding: 26px; color: #fff; }
.tslide__card--ai .tslide__ai-cap::before, .tslide__card--ai .tslide__ai-tag::before { content: none; }
.tslide__card--ai .tslide__ai-tag { display: inline-block; }
.tslide__ai-cap b { font: 700 21px/1.3 var(--ls-font-display); }
.tslide__ai-cap em { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ls-accent); }
[dir="rtl"] .tslide__ai-cap em svg { transform: scaleX(-1); }
.tslide__card--ai:hover img { transform: translateY(-6px) scale(1.03); }
.tslide:hover .tslide__card img { transform: scale(1.05); }
.tslide__card figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 80px 26px 26px; background: linear-gradient(to top, rgba(6, 13, 26, .92), rgba(6, 13, 26, 0)); color: #fff; }
.tslide__card b { font: 700 21px/1.3 var(--ls-font-display); }
.tslide__card span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.tslide__card span::before { content: ""; width: 18px; height: 2px; background: var(--ls-accent); transition: width .5s var(--ls-ease); }
.tslide:hover .tslide__card span::before { width: 32px; }
/* Entrance for the card that auto-scrolls into view: photo settles from a zoom, name rises */
.tslide.is-enter .tslide__card img { animation: tcard-in 1.4s var(--ls-ease) both; }
.tslide.is-enter figcaption > * { animation: tcap-in .9s var(--ls-ease) both; }
.tslide.is-enter figcaption > span { animation-delay: .12s; }
@keyframes tcard-in { from { transform: scale(1.18); filter: brightness(.6); } }
@keyframes tcap-in { from { opacity: 0; transform: translateY(18px); } }
.team-car__dots { display: flex; justify-content: center; gap: 4px; margin-top: 28px; }
.team-car__dots button { position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; }
.team-car__dots button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 9px; background: #c9ced8; transition: width .35s var(--ls-ease), margin .35s var(--ls-ease), background-color .3s; }
.team-car__dots button.is-active::before { width: 26px; margin-left: -13px; background: var(--ls-accent); }
@media (max-width: 1199px) { .team-car__track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 767px) {
	.team__head { display: block; }
	.team__arrows { display: none; }
	.team-car__track { grid-auto-columns: 82%; gap: 14px; }
	.tslide__card figcaption { padding: 60px 20px 20px; }
}

/* ---------- Video CTA ---------- */
.vcta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px, 70vw, 780px); padding-block: 90px; color: #fff; }
.vcta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vcta__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Sector caption synced to the background film */
/* real client logos of that sector, in white */
/* Logos keep their real colours on small light tiles (some files carry their own white background) */
/* "Since 1998" block: Light Star's reel in place of the photo. Translucent play control;
   pressing it restarts the reel with sound in place (no popup). */
.film { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: 26px; background: #0d1a2f; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__play {
	position: absolute; top: 50%; left: 50%; z-index: 2;
	display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
	background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, .9); opacity: .8;
	transition: opacity .4s, background-color .4s, transform .5s var(--ls-ease);
}
.film__play::before { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; animation: ls-pulse 2.6s ease-out infinite; }
.film__play:hover { opacity: 1; background: rgba(237, 41, 38, .8); transform: scale(1.06); }
.film__icon { display: grid; place-items: center; }
.film__icon--pause { display: none; gap: 6px; grid-auto-flow: column; }
.film__icon--pause i { width: 4px; height: 22px; border-radius: 2px; background: currentColor; }
.film.is-playing .film__icon--play { display: none; }
.film.is-playing .film__icon--pause { display: grid; }
.film.is-playing .film__play { opacity: .3; }
.film.is-playing .film__play::before { animation: none; opacity: 0; }
.film.is-playing .film__play:hover { opacity: 1; }
@media (max-width: 767px) { .film__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; } }
.vcta__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 13, 26, .8), rgba(6, 13, 26, .25)); }
.vcta__inner { position: relative; }
@keyframes ls-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vcta__title { font-size: clamp(40px, 6vw, 92px); line-height: 1.15; color: #fff; }

/* ---------- Blog cards ---------- */
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.bcard__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 20px; background: #dde1e8; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ls-ease); }
.bcard:hover .bcard__img img { transform: scale(1.06); }
.bcard__meta { display: flex; align-items: center; gap: 6px; margin: 18px 0 8px; font: 500 13px/1 var(--ls-font-display); color: var(--ls-accent); }
.bcard__title { font-size: 21px; line-height: 1.5; }
.bcard__title a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size .4s var(--ls-ease), color .3s; }
.bcard__title a:hover { color: var(--ls-accent); background-size: 100% 1px; }
.bcard__excerpt { margin: 10px 0 0; font-size: 15px; }

/* ---------- Gallery strip ---------- */
.gallery-strip { position: relative; overflow: hidden; padding-block: 60px 90px; }
.gallery-strip__word { position: absolute; top: 0; inset-inline: 0; text-align: center; font: 700 clamp(80px, 13vw, 210px)/1 var(--ls-font-display); color: rgba(10, 21, 39, .045); pointer-events: none; }
.marquee--photos { -webkit-mask-image: none; mask-image: none; margin-top: 18px; }
.marquee--photos .marquee__track { align-items: center; gap: 18px; padding-inline: 9px; animation-duration: 70s; }
.gphoto { margin: 0; overflow: hidden; border-radius: 18px; flex: none; }
.gphoto img { height: 100%; width: auto; object-fit: cover; }
.gphoto--0 { height: 250px; }
.gphoto--1 { height: 190px; }
.gphoto--2 { height: 300px; }

/* ---------- CTA band ---------- */
.cta-band { padding-block: clamp(80px, 8vw, 120px); background-color: var(--ls-bg); }
.cta-band__inner { display: grid; justify-items: center; text-align: center; }
.cta-band__title { margin: 22px 0 16px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.22; }
.cta-band p { max-width: 560px; margin: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding-top: 90px; background: #0a1527; color: rgba(255, 255, 255, .7); }
.site-footer__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: grayscale(.6); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 21, 39, .96), rgba(10, 21, 39, .85)); }
/* Brand grid (as on the business card) behind the footer */
.site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: 44px; margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__brand { display: flex; align-items: center; gap: 28px; max-width: 760px; }
.site-footer__brand img { flex: none; width: auto; height: 44px; }
.site-footer__tagline { margin: 0; padding-inline-start: 28px; border-inline-start: 1px solid rgba(255, 255, 255, .15); font: 500 15px/1.8 var(--ls-font-display); color: rgba(255, 255, 255, .8); }
.site-footer__follow { display: flex; align-items: center; gap: 16px; }
.site-footer__follow > span { font: 500 14px/1 var(--ls-font-display); color: rgba(255, 255, 255, .6); }
.site-footer__follow .socials { margin: 0; }
/* Four equal columns */
.site-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 64px; }
.site-footer__col h3 { position: relative; margin-bottom: 26px; padding-bottom: 14px; font-size: 17px; color: #fff; }
.site-footer__col h3::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 26px; height: 2px; background: var(--ls-accent); }
.site-footer__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer__col a { transition: color .25s; }
.site-footer__col a:hover { color: #fff; }
.site-footer__links a { display: inline-flex; align-items: center; }
.site-footer__links a::before { content: ""; width: 0; height: 1px; margin-inline-end: 0; background: var(--ls-accent); transition: width .35s var(--ls-ease), margin .35s var(--ls-ease); }
.site-footer__links a:hover::before { width: 14px; margin-inline-end: 10px; }
/* Icon rows (address, e-mail, phones): a small tile with the logo's cut corner + the text */
.f-rows { gap: 14px !important; }
.f-rows li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; line-height: 1.7; }
.f-rows__icon {
	--cut: 7px;
	flex: none; display: grid; place-items: center; width: 34px; height: 34px;
	background: rgba(237, 41, 38, .12); color: var(--ls-accent);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
	transition: background-color .3s, color .3s;
}
.f-rows li:hover .f-rows__icon { background: var(--ls-accent); color: #fff; }
.f-rows b { display: block; font-weight: 500; color: #fff; }
.f-rows a { word-break: break-word; }
.f-rows--phones li { align-items: center; }
.f-rows--phones a { font: 600 17px/1 "Golos Text", sans-serif; letter-spacing: .02em; color: #fff; }
.f-rows--phones li:first-child a { font-size: 21px; color: var(--ls-accent); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.site-footer__bottom b { color: var(--ls-accent); font-weight: 500; }
.to-top { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); transform: rotate(180deg); transition: background-color .3s; }
.to-top:hover { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.site-footer__word { margin-top: -10px; text-align: center; font: 700 clamp(64px, 15.5vw, 250px)/.8 var(--ls-font-display); color: rgba(255, 255, 255, .05); white-space: nowrap; pointer-events: none; direction: ltr; overflow: hidden; }
.socials { display: flex; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.socials a { --cut: 9px; display: grid; place-items: center; width: 44px; height: 44px; background: rgba(255, 255, 255, .07); color: #fff; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: background-color .3s, transform .3s var(--ls-ease); }
.socials a:hover { transform: translateY(-3px); }
.socials a:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
.socials--dark { margin-top: 10px; }
.socials--dark a { color: var(--ls-ink); background: var(--ls-surface-2); }
@media (max-width: 767px) {
	.site-footer__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
	.site-footer__tagline { padding-inline-start: 0; border: 0; }
	.site-footer__top { margin-bottom: 36px; }
}
.socials--dark a:hover { color: #fff; }

/* Floating WhatsApp: small dark control, label slides out on hover */
.wa-float { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 45; display: inline-flex; align-items: center; gap: 0; height: 52px; padding: 0 16px; border-radius: 999px; background: var(--ls-ink); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: gap .45s var(--ls-ease), background-color .3s; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 14px/1 var(--ls-font-display); transition: max-width .45s var(--ls-ease); }
.wa-float svg { color: #25d366; }
.wa-float:hover { gap: 10px; background: #050b16; }
.wa-float:hover span { max-width: 140px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 60px 20px; background: rgba(5, 11, 22, .92); }
.lightbox[hidden] { display: none; }
.lightbox__stage img, .lightbox__stage video { max-width: min(1200px, calc(92vw * var(--z))); max-height: calc(84vh * var(--z)); width: auto; border-radius: 14px; }
.lightbox__close { position: absolute; top: 20px; inset-inline-end: 20px; }

/* ---------- Inner page hero ---------- */
/* Navy band + brand grid; title on the reading side, cut-corner photo composition on the other */
.phero {
	position: relative; isolation: isolate; overflow: hidden;
	padding: calc(var(--ls-header-h) + 50px) 0 90px;
	background:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px,
		radial-gradient(70% 90% at 80% 20%, #16264a 0, var(--ls-dark) 60%);
	color: #fff;
}
.phero__ghost {
	position: absolute; inset-inline: 0; bottom: -.18em; z-index: -1;
	font: 700 clamp(120px, 17vw, 300px)/1 var(--ls-font-display); text-align: center; white-space: nowrap;
	color: rgba(255, 255, 255, .045); pointer-events: none;
}
.phero__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(30px, 5vw, 80px); }
.phero__inner { position: relative; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: 14px; color: rgba(255, 255, 255, .65); }
.crumbs a:hover { color: #fff; }
.crumbs b { font-weight: 500; color: var(--ls-accent); }
.phero__title { margin-top: 18px; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.15; color: #fff; }
.phero__lead { max-width: 560px; margin: 20px 0 0; font-size: 17px; line-height: 1.85; color: rgba(255, 255, 255, .8); }
.phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
/* Photo composition */
.phero__visual { position: relative; padding: 0 0 46px; padding-inline-end: 56px; }
.phero__frame {
	--cut: 46px;
	aspect-ratio: 5 / 4; background: #14223a;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.phero__frame > img { width: 100%; height: 100%; object-fit: cover; }
.phero__frame2 {
	--cut: 18px;
	position: absolute; bottom: 0; inset-inline-end: 0; width: 38%; aspect-ratio: 1;
	border: 6px solid var(--ls-dark); background: #14223a;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.phero__frame2 img { width: 100%; height: 100%; object-fit: cover; }
/* The logo's red "L" hugging the frame's corner, with its little star */
.phero__corner { position: absolute; top: -16px; left: -16px; width: 90px; height: 90px; border-top: 3px solid var(--ls-accent); border-left: 3px solid var(--ls-accent); pointer-events: none; }
.phero__corner::after { content: "✦"; position: absolute; top: -28px; left: -26px; font-size: 16px; line-height: 1; color: var(--ls-accent); }
[dir="rtl"] .phero__corner, .phero__corner { left: auto; right: auto; inset-inline-end: 40px; }
@media (prefers-reduced-motion: no-preference) {
	.phero__inner > * { animation: ls-rise .9s var(--ls-ease) both; }
	.phero__inner > :nth-child(2) { animation-delay: .1s; }
	.phero__inner > :nth-child(3) { animation-delay: .2s; }
	.phero__inner > :nth-child(4) { animation-delay: .3s; }
	.phero__inner > :nth-child(5) { animation-delay: .4s; }
	.phero__frame { animation: phero-wipe 1.4s cubic-bezier(.77, 0, .18, 1) .15s both; }
	.phero__frame2 { animation: phero-pop 1s var(--ls-ease) .9s both; }
	.phero__corner { animation: phero-corner 1.1s var(--ls-ease) 1.2s both; }
	.phero__ghost { animation: phero-ghost 1.6s var(--ls-ease) .2s both; }
}
@keyframes phero-wipe { from { clip-path: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%); } }
@keyframes phero-pop { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes phero-corner { from { opacity: 0; transform: translate(24px, 24px); } }
@keyframes phero-ghost { from { opacity: 0; transform: translateY(30%); } }
@media (max-width: 991px) {
	.phero__wrap { grid-template-columns: 1fr; }
	.phero__visual { max-width: 620px; }
}
@media (max-width: 767px) {
	.phero { padding: calc(var(--ls-header-h) + 30px) 0 60px; }
	.phero__visual { padding-inline-end: 30px; padding-bottom: 30px; }
	.phero__frame { --cut: 28px; }
	.phero__actions .quote-btn { display: inline-flex; } /* the header hides its own copy on phones */
	.phero__corner { width: 60px; height: 60px; inset-inline-end: 20px; }
}

/* ---------- Prose (editor content) ---------- */
.prose { font-size: 17px; line-height: 1.95; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(24px, 2.4vw, 32px); }
.prose h3 { margin-top: 1.6em; font-size: clamp(20px, 2vw, 25px); }
.prose h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: var(--ls-accent); }
.prose a { color: var(--ls-accent); text-decoration: underline; text-underline-offset: 4px; }
.prose img { height: auto; border-radius: 18px; margin-block: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--ls-accent); }
.prose blockquote { margin-inline: 0; padding: 22px 26px; border-inline-start: 3px solid var(--ls-accent); border-radius: 12px; background: var(--ls-surface); font: 500 18px/1.8 var(--ls-font-display); color: var(--ls-ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 12px 14px; border: 1px solid var(--ls-line); text-align: start; }
.prose th { background: var(--ls-surface-2); color: var(--ls-ink); }
.prose .wp-caption, .prose figure { max-width: 100%; }

/* ---------- Blog index / article ---------- */
.blog-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 44px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills--center { justify-content: center; margin-bottom: 44px; }
.pill { padding: 10px 20px; border: 1px solid var(--ls-line); border-radius: 999px; background: transparent; font: 500 14px/1 var(--ls-font-display); color: var(--ls-ink); transition: background-color .25s, color .25s, border-color .25s; }
.pill:hover { border-color: var(--ls-ink); }
.pill.is-active { background: var(--ls-ink); border-color: var(--ls-ink); color: #fff; }
.search-mini { display: flex; align-items: center; width: min(320px, 100%); border-bottom: 1px solid var(--ls-ink); }
.search-mini input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; font: inherit; color: var(--ls-ink); outline: none; }
.search-mini button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ls-accent); color: #fff; }
.pager, .navigation.pagination { margin-top: 60px; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding-inline: 10px; border: 1px solid var(--ls-line); border-radius: 999px; font: 500 15px/1 var(--ls-font-display); color: var(--ls-ink); }
.nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--ls-ink); border-color: var(--ls-ink); color: #fff; }
.nav-links .next svg { transform: none; }
.nav-links .prev svg { transform: rotate(180deg); }

.article__grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.article__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--ls-line); font: 500 14px/1 var(--ls-font-display); color: var(--ls-accent); }
.article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article__cover { margin: 0 0 34px; overflow: hidden; border-radius: 22px; }
.article__cover img { width: 100%; }
.share { display: flex; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ls-line); }
.share a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ls-line); color: var(--ls-ink); transition: background-color .3s, color .3s; }
.share a:hover { background: var(--ls-accent); color: #fff; border-color: var(--ls-accent); }
.article__aside { position: sticky; top: 100px; display: grid; gap: 20px; }
.side-card { padding: 28px; border-radius: 20px; background: var(--ls-surface); }
.side-card h3 { margin-bottom: 14px; font-size: 20px; }
.side-card--dark { background: #0d1a2f; color: rgba(255, 255, 255, .75); }
.side-card--dark h3 { margin-top: 16px; color: #fff; }
.side-card--dark .btn { width: 100%; margin-top: 10px; }
.side-links { margin: 0; padding: 0; list-style: none; }
.side-links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ls-line); color: var(--ls-ink); transition: color .25s; }
.side-links a:hover { color: var(--ls-accent); }

/* ---------- Service pages ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.split--top { align-items: start; }
.split__media img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; border-radius: 26px; }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.spec { padding: 10px 16px; border-radius: 12px; background: var(--ls-surface); font: 500 14px/1.3 var(--ls-font-display); color: var(--ls-ink); border-inline-start: 3px solid var(--ls-accent); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.feature-grid li { display: flex; align-items: flex-start; gap: 14px; padding: 24px 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .03); font: 500 16px/1.6 var(--ls-font-display); color: #fff; transition: border-color .3s, background-color .3s; }
.feature-grid li:hover { border-color: var(--ls-accent); background: rgba(237, 41, 38, .08); }
.feature-grid li span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ls-accent); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 12px 20px; border-radius: 999px; background: var(--ls-surface); font: 500 15px/1.4 var(--ls-font-display); color: var(--ls-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.numbered { display: grid; gap: 14px; }
.numbered__item { display: flex; gap: 22px; padding: 28px; border-radius: 20px; background: var(--ls-surface); }
.numbered__n { flex: none; font: 700 38px/1 var(--ls-font-display); color: var(--ls-accent); }
.numbered__item h3 { margin-bottom: 8px; font-size: 21px; }
.numbered__item p { margin: 0; font-size: 15px; }
.masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.masonry__item:first-child { grid-column: span 2; grid-row: span 2; }
/* 8 photos: big first + wide 6th fills a 4-column grid exactly */
.masonry__item:nth-child(6) { grid-column: span 2; aspect-ratio: auto; }
.masonry__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #dde1e8; }
.masonry__item:first-child { aspect-ratio: auto; }
/* Absolute so a photo never stretches its grid row; square siblings define the row height. */
.masonry__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ls-ease); }
.masonry__item:hover img { transform: scale(1.05); }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 30px; }
.row-head .h-display { margin: 0; }
.catalog { margin-top: 20px; border-radius: 20px; overflow: hidden; }

/* FAQ */
.accordion { display: grid; gap: 12px; }
.accordion details { border-radius: 18px; background: var(--ls-surface); transition: box-shadow .3s; }
.accordion details[open] { box-shadow: 0 18px 40px rgba(0, 0, 0, .06); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; cursor: pointer; list-style: none; font: 600 18px/1.5 var(--ls-font-display); color: var(--ls-ink); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ls-bg); transition: transform .3s, background-color .3s, color .3s; }
.accordion details[open] summary span { transform: rotate(45deg); background: var(--ls-accent); color: #fff; }
.accordion details p { margin: 0; padding: 0 26px 24px; }

/* Services overview cards */
.svc-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.svc-card { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ls-surface); transition: transform .4s var(--ls-ease), box-shadow .4s; }
.svc-card:nth-child(4), .svc-card:nth-child(5) { grid-column: span 3; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0, 0, 0, .08); }
.svc-card__img { aspect-ratio: 16 / 10; overflow: hidden; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ls-ease); }
.svc-card:hover .svc-card__img img { transform: scale(1.06); }
.svc-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 26px 26px 30px; }
.svc-card__body h2 { font-size: 26px; }
.svc-card__body p { margin: 0 0 8px; font-size: 15px; }
.svc-card .link-arrow { margin-top: auto; color: var(--ls-accent); }

/* About */
.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mvv__card { position: relative; padding: 34px 30px; border-radius: 22px; background: var(--ls-surface); overflow: hidden; }
.mvv__card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ls-ease); }
.mvv__card:hover::after { transform: scaleX(1); }
.mvv__n { font: 700 16px/1 var(--ls-font-display); color: var(--ls-accent); }
.mvv__card h3 { margin: 18px 0 12px; font-size: 26px; }
.mvv__card p { margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tcard { margin: 0; }
.tcard__img { overflow: hidden; aspect-ratio: 4 / 4.8; border-radius: 20px; background: #dde1e8; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: transform .8s var(--ls-ease), filter .5s; }
.tcard:hover .tcard__img img { transform: scale(1.05); filter: none; }
.tcard figcaption { display: grid; gap: 4px; padding-top: 16px; }
.tcard figcaption b { font: 600 19px/1.3 var(--ls-font-display); color: var(--ls-ink); }
.tcard figcaption span { font-size: 14px; color: var(--ls-accent); }

/* Clients page */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.logo-wall li { display: grid; place-items: center; height: 140px; padding: 26px; border-radius: 18px; background: var(--ls-surface); transition: box-shadow .3s; }
.logo-wall li:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .06); }
.logo-wall img { max-height: 70px; width: auto; object-fit: contain; }
.logo-wall--small { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }

/* Contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 70px; }
.ccard { display: grid; gap: 8px; padding: 30px; border-radius: 22px; background: var(--ls-surface); transition: transform .3s var(--ls-ease), box-shadow .3s; }
.ccard:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0, 0, 0, .07); }
.ccard__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: var(--ls-ink); color: var(--ls-accent); }
.ccard h3 { font-size: 20px; }
.ccard p { margin: 0; font-size: 15px; word-break: break-word; }
.contact-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.contact-info { display: grid; gap: 22px; padding: 32px; border-radius: 24px; background: var(--ls-surface); }
.contact-info__row { display: flex; gap: 16px; }
.contact-info__row > span { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ls-bg); color: var(--ls-accent); }
.contact-info__row b { font: 600 16px/1.4 var(--ls-font-display); color: var(--ls-ink); }
.contact-info__row p { margin: 4px 0 0; font-size: 15px; }
.map iframe { width: 100%; height: 280px; border: 0; border-radius: 18px; filter: grayscale(.4); }
/* Contact: full-width precise map with a floating address card */
.map-band { position: relative; height: clamp(460px, 48vw, 640px); background: #e7eaf0; }
.map-band__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-band__inner { position: relative; height: 100%; display: flex; align-items: flex-end; padding-block: 40px; pointer-events: none; }
.map-card {
	--cut: 22px;
	pointer-events: auto; max-width: 420px; padding: 30px 32px;
	background: var(--ls-dark); color: rgba(255, 255, 255, .78); box-shadow: 0 30px 60px rgba(6, 13, 26, .35);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.map-card .eyebrow { color: rgba(255, 255, 255, .85); }
.map-card__title { margin: 16px 0 8px; font-size: 24px; color: #fff; }
.map-card p { margin: 0 0 22px; font-size: 15px; }
.map-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.map-card__tel { color: #fff; font-family: "Golos Text", sans-serif; }
@media (max-width: 767px) {
	.map-band { height: auto; display: flex; flex-direction: column; }
	.map-band__frame { position: relative; height: 380px; }
	.map-band__inner { padding: 0; }
	.map-card { max-width: none; width: 100%; margin-top: -30px; }
}

/* Contact Form 7 */
.wpcf7 form p { margin: 0 0 16px; }
.wpcf7 label { display: block; font: 500 14px/1.4 var(--ls-font-display); color: var(--ls-ink); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
	width: 100%; margin-top: 8px; padding: 16px 18px;
	border: 1px solid var(--ls-line); border-radius: 14px; background: var(--ls-surface);
	font: 400 16px/1.5 var(--ls-font-body); color: var(--ls-ink);
	transition: border-color .25s, box-shadow .25s;
}
.wpcf7 textarea { height: 160px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--ls-accent); box-shadow: 0 0 0 4px rgba(237, 41, 38, .15); }
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] { min-height: 54px; padding: 0 38px; border: 0; border-radius: 999px; background: var(--ls-accent); color: #fff; font: 500 16px/1 var(--ls-font-display); cursor: pointer; transition: background-color .3s; }
.wpcf7 input[type="submit"]:hover { background: var(--ls-accent-hover); }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; }

/* Portfolio single */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.facts div { padding: 16px; border-radius: 14px; background: var(--ls-surface); }
.facts dt { font-size: 13px; color: #737a8a; }
.facts dd { margin: 4px 0 0; font: 600 16px/1.4 var(--ls-font-display); color: var(--ls-ink); }

/* 404 */
.nf { position: relative; isolation: isolate; display: grid; place-items: center; min-height: min(calc(100vh * var(--z)), 900px); padding: 140px 0 80px; color: #fff; text-align: center; }
.nf__code { display: block; font: 700 clamp(120px, 20vw, 240px)/1 var(--ls-font-display); color: var(--ls-accent); }
.nf h1 { margin: 10px 0 16px; font-size: clamp(30px, 4vw, 52px); color: #fff; }
.nf p { color: rgba(255, 255, 255, .8); }
.nf__search { margin: 26px auto 10px; border-color: rgba(255, 255, 255, .5); }
.nf__search input { color: #fff; }
.nf__search input::placeholder { color: rgba(255, 255, 255, .6); }

/* WooCommerce (light touch) */
.woo ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.woo ul.products::before, .woo ul.products::after { display: none; }
.woo ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 12px 12px 22px; border-radius: 20px; background: var(--ls-surface); text-align: center; }
.woo ul.products li.product img { border-radius: 14px; margin-bottom: 14px !important; }
.woo .woocommerce-loop-product__title { font: 600 19px/1.4 var(--ls-font-display) !important; color: var(--ls-ink); }
.woo .price { color: var(--ls-accent) !important; font: 600 17px/1.4 var(--ls-font-display) !important; }
.woo .button, .woocommerce .button { border-radius: 999px !important; background: var(--ls-ink) !important; color: #fff !important; font-family: var(--ls-font-display) !important; padding: 12px 24px !important; }
.woo .button:hover { background: var(--ls-accent) !important; }
.woocommerce-result-count, .woocommerce-ordering { margin-bottom: 30px !important; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ls-ease), transform .9s var(--ls-ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.marquee__track { animation: none; }
}

/* ==========================================================================
   Responsive (sections)
   ========================================================================== */
@media (max-width: 1199px) {
	.cards-4, .stats__grid, .steps, .feature-grid, .team-grid, .logo-wall { grid-template-columns: repeat(2, 1fr); }
	.step:nth-child(n) { margin-top: 0; }
	.svc, .team__wrap, .testi__grid, .about-dark__grid, .article__grid, .contact-main { grid-template-columns: 1fr; }
	.svc__media { min-height: 420px; }
	.team__photos { max-width: 420px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.article__aside { position: static; }
	.svc-cards { grid-template-columns: repeat(2, 1fr); }
	.svc-card, .svc-card:nth-child(4), .svc-card:nth-child(5) { grid-column: auto; }
	.bgrid, .pgrid { grid-template-columns: repeat(2, 1fr); }
	.pgrid--stagger .pcard:nth-child(n) { margin-top: 0; }
}

@media (max-width: 767px) {
	.shead--split { grid-template-columns: 1fr; gap: 16px; }
	.shead--split .eyebrow { margin-top: 0; }
	.cards-4, .stats__grid, .steps, .feature-grid, .team-grid, .bgrid, .pgrid, .mvv, .contact-cards, .svc-cards, .split, .site-footer__grid, .facts { grid-template-columns: 1fr; }
	.logo-wall { grid-template-columns: repeat(2, 1fr); }
	.logo-wall li { height: 110px; padding: 18px; }
	.checks--2 { grid-template-columns: 1fr; }
	.stat__num { text-align: start; direction: rtl; }
	.svc__media { min-height: 320px; }
	.svc__img figcaption { inset-inline: 14px; bottom: 14px; max-width: none; font-size: 14px; }
	.svc__list a, .team__list li { gap: 14px; padding: 20px 0; }
	.team__list li { flex-wrap: wrap; }
	.team__role { order: 3; width: 100%; padding-inline-start: 36px; }
	.team__list .svc__arrow { display: none; }
	.about-dark__badge { --cut: 16px; width: 116px; height: 116px; gap: 8px; bottom: -24px; inset-inline-end: 16px; }
	.about-dark__badge b { font-size: 40px; }
	.about-dark__badge sup { font-size: 20px; }
	.about-dark__badge > span { font-size: 13px; padding-top: 8px; }
	.gphoto--0 { height: 170px; } .gphoto--1 { height: 130px; } .gphoto--2 { height: 200px; }
	.site-footer__bottom { flex-direction: column-reverse; text-align: center; }
	.masonry { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.masonry__item { border-radius: 12px; }
	.woo ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
	.wa-float { height: 48px; padding: 0 14px; bottom: calc(16px + env(safe-area-inset-bottom)); inset-inline-end: 16px; }
	.contact-info { padding: 22px; }
}

/* ==========================================================================
   Motion layer (pairs with assets/js/motion.js)
   ========================================================================== */

/* Word-by-word headings: each word rises out of its own mask */
.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em .1em; margin-block: -.14em -.1em; }
.is-split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ls-ease); transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0) * 110ms); }
.is-in .is-split .w > span, .is-split.is-in .w > span { transform: none; }
.js [data-reveal="words"] { opacity: 1; transform: none; }
/* Hero headline starts right away (it is above the fold) */
.hero__title.is-split .w > span { transition-duration: 1.2s; transition-delay: calc(.25s + var(--wi, 0) * 70ms); }
.hero__content > .hero__title { animation: none; }

/* Image reveal: a curtain opens from the bottom while the photo settles */
/* Image reveal: a curtain in the section colour slides away (transform only, reliable everywhere). */
.js [data-reveal="img"] { position: relative; opacity: 1; transform: none; }
.js [data-reveal="img"]::after { content: ""; position: absolute; inset: -1px; z-index: 3; background: var(--curtain, var(--ls-bg)); transform-origin: 50% 0; transition: transform 1.25s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--d, 0) * 110ms); pointer-events: none; }
.js [data-reveal="img"].is-in::after { transform: scaleY(0); }
.about-dark { --curtain: #0d1a2f; }
.testi { --curtain: var(--ls-surface-2); }
.about-dark__badge { z-index: 4; }
.js [data-reveal="img"] > .about-dark__badge { transform: scale(0); transition: transform .8s 1s var(--ls-ease); }
.js [data-reveal="img"].is-in > .about-dark__badge { transform: none; }
.js [data-reveal="img"] img { transform: scale(1.25); transition: transform 1.8s var(--ls-ease); }
.js [data-reveal="img"].is-in img { transform: scale(1); }
.js [data-reveal="img"] .pimg img { transform: none; transition: none; }

/* Inner-photo parallax: the frame stays, the photo drifts inside it */
.pimg { position: relative; overflow: hidden; }
.pimg.rounded { border-radius: 26px; }
.pimg > img { display: block; width: 100%; will-change: transform; transform: scale(1.14); }
.about-dark__media .pimg img, .split__media .pimg img { aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 0; }
.testi__photo .pimg img { aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 0; }
.phero__bg.pimg, .vcta__bg.pimg { position: absolute; inset: 0; z-index: -2; }
.phero__bg.pimg img, .vcta__bg.pimg img { width: 100%; height: 100%; object-fit: cover; }
.no-motion .pimg > img { transform: none; }

/* Gradient "ghost" words (Antra custom-text-gradient) */
.text-fade { color: rgba(255, 255, 255, .045) !important; will-change: transform; }
.text-fade--dark { color: rgba(10, 21, 39, .05) !important; }

/* Big scrolling words band */
.text-band { overflow: hidden; padding-block: clamp(30px, 4vw, 56px); background: var(--ls-bg); direction: ltr; }
.text-band__row { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; white-space: nowrap; will-change: transform; animation: ls-band 60s linear infinite; }
.text-band__word { font: 700 clamp(48px, 8vw, 120px)/1.1 var(--ls-font-display); color: var(--ls-ink); direction: rtl; }
/* Outlined Arabic shows the stroke at every letter join — use a soft solid tone instead */
.text-band__word.is-outline { color: rgba(10, 21, 39, .16); }
.text-band__star { font-size: clamp(26px, 3vw, 44px); color: var(--ls-accent); }
@keyframes ls-band { to { translate: -33.333% 0; } }
.no-motion .text-band__row { animation: none; }

.nav__list > li > a:hover { color: #fff; }

/* Arrow "draw" on button hover (Antra opal-draw) */
@keyframes ls-draw { 0%, 100% { clip-path: inset(0); } 42% { clip-path: inset(0 0 0 100%); } 43% { clip-path: inset(0 100% 0 0); } }
.btn-pill:hover i svg, .svc__list li.is-active .svc__arrow svg, .link-arrow:hover svg, .hero__scroll:hover svg { animation: ls-draw .75s ease both; }
.btn-pill:hover i { transform: none; }

/* Trailing "view" cursor (motion.js) */
.cursor-view { position: fixed; top: 0; left: 0; z-index: 90; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--ls-accent); color: #fff; font: 600 13px/1.3 var(--ls-font-display); text-align: center; pointer-events: none; }
.cursor-view::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; transform: scale(0); transition: transform .45s var(--ls-ease); z-index: -1; }
.cursor-view { background: none; color: transparent; transition: color .2s; }
.cursor-view.is-on { color: #fff; }
.cursor-view.is-on::before { transform: scale(1); background: var(--ls-accent); }
[data-cursor] { cursor: none; }
@media (pointer: coarse) { [data-cursor] { cursor: pointer; } .cursor-view { display: none; } }

/* Project card: floating "view" disc on hover */
.pcard__view { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--ls-accent); color: #fff; font: 500 14px/1.35 var(--ls-font-display); text-align: center; transform: translate(-50%, -50%) scale(0); transition: transform .5s var(--ls-ease); }
.pcard:hover .pcard__view { transform: translate(-50%, -50%) scale(1); }
.pcard__img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .5s; }
.pcard:hover .pcard__img::after { opacity: 1; }

/* Back-to-top with progress ring */
.to-top-ring { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 45; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--ls-ink); color: #fff; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s, transform .35s var(--ls-ease), visibility .35s, background-color .3s; }
.to-top-ring.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top-ring:hover { background: var(--ls-accent); }
.to-top-ring > .ls-icon { transform: rotate(180deg); }
.to-top-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke-width: 2; }
.to-top-ring circle.t { stroke: rgba(255, 255, 255, .15); }
.to-top-ring circle.p { stroke: var(--ls-accent); transition: stroke-dashoffset .1s linear; }

/* Infinite blog feed */
.feed-more { display: grid; place-items: center; min-height: 90px; margin-top: 40px; }
.feed-more__spinner { width: 36px; height: 36px; border: 3px solid rgba(237, 41, 38, .25); border-top-color: var(--ls-accent); border-radius: 50%; opacity: 0; }
.feed-more.is-loading .feed-more__spinner { opacity: 1; animation: ls-spin .8s linear infinite; }
/* Real link for crawlers/no-JS; hidden once the infinite feed takes over */
.feed-more__link { padding: 12px 24px; border: 1px solid var(--ls-line); border-radius: 999px; font: 500 14px/1 var(--ls-font-display); }
.js .feed-more__link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.feed-more__done { display: none; padding: 10px 22px; border: 1px solid var(--ls-line); border-radius: 999px; font: 500 14px/1 var(--ls-font-display); }
.feed-more.is-done .feed-more__spinner { display: none; }
.feed-more.is-done .feed-more__done { display: inline-block; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* Video band */
.vband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(460px, 56vw, 720px); color: #fff; }
.vband__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vband__media.pimg img { width: 100%; height: 100%; object-fit: cover; }
.vband__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 13, 26, .15), rgba(6, 13, 26, .75)); }
.vband__inner { position: relative; }
.vband__title { margin-top: 20px; font-size: clamp(36px, 5.4vw, 84px); line-height: 1.18; color: #fff; }
.vband__title em { font-style: normal; color: var(--ls-accent); }
.vband__play { position: static; margin-top: 36px; transform: none; }

/* Panorama */
/* Height lives on the frame: pannellum.css (loaded later) forces its container to height:100%. */
.pano__frame { position: relative; overflow: hidden; height: clamp(360px, 46vw, 640px); border-radius: 26px; background: #0a1527; }
.pano__view.pnlm-container { background: #0a1527; }
.pano__view { width: 100%; height: 100%; cursor: grab; }
.pano__view:active { cursor: grabbing; }
.pano__view .pnlm-load-box { border-radius: 14px; background: rgba(0, 0, 0, .6); font-family: var(--ls-font-body); }
.pano__view .pnlm-controls-container { top: auto; bottom: 18px; left: 18px; }
.pano__hint { position: absolute; bottom: 22px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 14px/1 var(--ls-font-display); transform: translateX(-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; transition: opacity .4s; }
.pano__hint i { width: 26px; height: 16px; border: 1.5px solid #fff; border-radius: 10px; position: relative; }
.pano__hint i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--ls-accent); animation: ls-drag 1.6s ease-in-out infinite; }
@keyframes ls-drag { 50% { transform: translateX(10px); } }
.pano__frame.is-touched .pano__hint { opacity: 0; }
.pano__frame.is-failed .pano__hint { display: none; }
.pano__view > img.pano__fallback { width: 100%; height: 100%; object-fit: cover; }

.pano__open { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 13px/1 var(--ls-font-display); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s; }
.pano__open:hover { background: var(--ls-accent); }

/* Material hotspots (Pannellum info spots) */
.pnlm-hotspot-base.ls-hotspot { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ls-accent); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 0 rgba(237, 41, 38, .7); animation: ls-hs 2s ease-out infinite; cursor: pointer; }
@keyframes ls-hs { 70% { box-shadow: 0 0 0 16px rgba(237, 41, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(237, 41, 38, 0); } }
.pnlm-hotspot-base.ls-hotspot span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; width: max-content; max-width: 220px; margin: 0 !important; padding: 10px 14px; border-radius: 12px; background: rgba(10, 21, 39, .92); color: #fff; font: 500 14px/1.5 var(--ls-font-display); text-align: center; direction: rtl; transform: translate(-50%, 6px); opacity: 0; transition: opacity .25s, transform .3s var(--ls-ease), visibility .25s; }
.pnlm-hotspot-base.ls-hotspot span::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(10, 21, 39, .92); }
.pnlm-hotspot-base.ls-hotspot:hover span, .pnlm-hotspot-base.ls-hotspot:focus span { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.pnlm-hotspot-base.ls-hotspot:hover { animation-play-state: paused; }

/* Full-screen virtual tour page */
.tour { position: relative; height: calc(100vh * var(--z)); height: calc(100svh * var(--z)); min-height: 560px; background: #0a1527; }
.tour__view { position: absolute; inset: 0; }
.tour__view.pnlm-container { background: #0a1527; }
.tour__panel { position: absolute; bottom: 36px; right: var(--ls-gutter); z-index: 3; max-width: 440px; padding: 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: rgba(10, 21, 39, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: rgba(255, 255, 255, .8); }
.tour__title { margin: 16px 0 10px; font-size: clamp(26px, 3vw, 40px); color: #fff; }
.tour__panel p { margin: 0; font-size: 15px; }
.tour__hint { bottom: 36px; left: 50%; }
.tour .pnlm-controls-container { top: auto; bottom: 36px; left: var(--ls-gutter); }
@media (max-width: 767px) {
	.tour__panel { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 20px; }
	.tour__hint { top: 90px; bottom: auto; }
	.tour .pnlm-controls-container { top: 90px; bottom: auto; }
}

/* ---------- Clients / track record (عملاؤنا) ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Sector navigation: quiet typographic tabs, gold underline for the active sector */
.refs-bar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ls-line); background: rgba(245, 246, 248, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .55s var(--ls-ease); }
body:has(.site-header.is-scrolled:not(.is-hidden)) .refs-bar { transform: translateY(86px); }
.refs-bar__inner { display: flex; align-items: center; gap: 24px; }
.refs-bar__nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.refs-bar__nav::-webkit-scrollbar { display: none; }
.refs-bar__nav a { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 24px 12px; white-space: nowrap; font: 500 15px/1 var(--ls-font-display); color: var(--ls-text); transition: color .3s; }
.refs-bar__nav a::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; background: var(--ls-accent); transform: scaleX(0); transition: transform .45s var(--ls-ease); }
.refs-bar__nav a:hover, .refs-bar__nav a.is-active { color: var(--ls-ink); }
.refs-bar__nav a.is-active::after { transform: scaleX(1); }
.refs-bar__n { font-size: 11px; font-weight: 700; color: var(--ls-accent-muted); }
.refs-bar__search { display: flex; align-items: center; gap: 8px; width: 250px; padding-block: 8px; border-bottom: 1px solid rgba(10, 21, 39, .35); color: var(--ls-ink); transition: border-color .3s; }
.refs-bar__search:focus-within { border-color: var(--ls-accent); }
.refs-bar__search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 15px/1.4 var(--ls-font-body); color: var(--ls-ink); outline: none; }

/* One sector = sticky editorial heading + content column (like the services/team lists) */
.sector { position: relative; padding-block: clamp(80px, 9vw, 130px); scroll-margin-top: 150px; }
.sector--dark { background: #0d1a2f; color: rgba(255, 255, 255, .72); }
.sector__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.sector__sticky { position: sticky; top: 170px; }
.sector__n { display: block; margin-bottom: 18px; font: 700 clamp(64px, 7vw, 110px)/.9 var(--ls-font-display); color: transparent; -webkit-text-stroke: 1px var(--ls-accent); }
.sector__title { margin: 18px 0 16px; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.25; }
.sector--dark .sector__title { color: #fff; }
.sector__head p { max-width: 460px; margin: 0 0 24px; font-size: 16px; }
.sector__count { display: inline-flex; align-items: baseline; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ls-accent); font: 500 15px/1 var(--ls-font-display); color: var(--ls-ink); }
.sector__count b { font-size: 30px; font-weight: 700; }
.sector--dark .sector__count { color: #fff; }
.sector__media { margin: 36px 0 0; overflow: hidden; border-radius: 22px; }
.sector__media .pimg img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Logos: no boxes — a calm grid of greyscale marks that wake up on hover */
.sector__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; margin: 0 0 56px; padding: 0; list-style: none; }
.logo-cell { position: relative; display: grid; align-content: start; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--ls-line); }
.sector--dark .logo-cell { border-color: rgba(255, 255, 255, .1); }
.logo-cell::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ls-ease); }
.logo-cell:hover::after { transform: scaleX(1); }
.logo-cell--wide { grid-column: span 2; }
.logo-cell__img { display: flex; align-items: center; height: 72px; margin-bottom: 8px; }
.logo-cell__img img { max-height: 60px; max-width: 180px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .5s, opacity .5s, transform .5s var(--ls-ease); }
.sector--dark .logo-cell__img img { filter: grayscale(1) brightness(0) invert(1); opacity: .6; }
.logo-cell:hover .logo-cell__img img { filter: none; opacity: 1; transform: translateY(-2px); }
.sector--dark .logo-cell:hover .logo-cell__img img { filter: grayscale(1) brightness(0) invert(1); opacity: 1; }
.logo-cell__name { font: 600 16px/1.45 var(--ls-font-display); color: var(--ls-ink); }
.sector--dark .logo-cell__name { color: #fff; }
.logo-cell__place { font-size: 13px; color: var(--ls-text); }
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.chips-inline li { position: relative; padding-inline-start: 12px; font-size: 13px; }
.chips-inline li::before { content: ""; position: absolute; top: .7em; inset-inline-start: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ls-accent); }

/* Names without logos: numbered rows, same rhythm as the services list */
.sector__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ls-line); }
.sector--dark .sector__list { border-color: rgba(255, 255, 255, .12); }
.sector__list li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 22px 0; border-bottom: 1px solid var(--ls-line); }
.sector--dark .sector__list li { border-color: rgba(255, 255, 255, .1); }
.sector__list li::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ls-ease); }
.sector__list li:hover::after { transform: scaleX(1); }
.sector__name { flex: 1; font: 600 clamp(18px, 1.7vw, 23px)/1.4 var(--ls-font-display); color: var(--ls-ink); transition: transform .45s var(--ls-ease), color .3s; }
/* Latin names stay in the Arabic line direction (right-aligned) without reordering */
.sector__name.is-latin { unicode-bidi: isolate; }
.sector--dark .sector__name { color: #fff; }
.sector__list li:hover .sector__name { transform: translateX(-8px); color: var(--ls-accent); }
.sector__place { font-size: 14px; color: #7a8191; }
.sector--dark .sector__place { color: rgba(255, 255, 255, .5); }
.sector__list .svc__num { align-self: center; }

[data-refs-item].is-filtered, .sector.is-filtered { display: none; }
.refs-empty { padding: 90px 0; text-align: center; font-size: 17px; }
.refs-empty a { color: var(--ls-accent); }

@media (max-width: 1199px) {
	.sector__grid { grid-template-columns: 1fr; }
	.sector__sticky { position: static; }
	.sector__media { max-width: 560px; }
	.refs-bar__search { width: 190px; }
}
@media (max-width: 767px) {
	.sector__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.logo-cell__img { height: 56px; }
	.logo-cell__img img { max-height: 44px; max-width: 130px; }
	.sector__list li { padding: 18px 0; gap: 4px 14px; }
	.sector__place { flex-basis: 100%; padding-inline-start: 36px; }
	.refs-bar__inner { flex-wrap: wrap; gap: 0; padding-bottom: 12px; }
	.refs-bar__nav { flex-basis: 100%; }
	.refs-bar__nav a { padding: 18px 10px; }
	.refs-bar__search { width: 100%; }
	body:has(.site-header.is-scrolled:not(.is-hidden)) .refs-bar { transform: translateY(66px); }
}

/* Pause control for auto-moving strips */
.motion-toggle { position: absolute; bottom: 8px; inset-inline-end: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ls-line); border-radius: 50%; background: rgba(245, 246, 248, .9); color: var(--ls-ink); opacity: .55; transition: opacity .3s; direction: ltr; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; }
.motion-toggle span { width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.motion-toggle[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
.is-paused .marquee__track, .is-paused .text-band__row { animation-play-state: paused !important; }

/* Lightbox video frame */
.lightbox__frame { width: min(1100px, 92vw); aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }

/* Watermarks move with the page, keep them above the section background */
.about-dark__watermark { transform: none; inset-inline-start: auto; right: 0; left: 0; text-align: center; }

@media (max-width: 767px) {
	.to-top-ring { width: 46px; height: 46px; bottom: 16px; inset-inline-start: 16px; }
	.pcard__view { display: none; }
}

/* ==========================================================================
   Dressing Room page (page-dressing-rooms.php) — everything scoped to .dressing-page
   ========================================================================== */
.dressing-page .dr-intro__grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.dressing-page .dr-intro__copy p { font-size: 17px; line-height: 1.9; }
.dressing-page .dr-intro__copy a:not(.btn-pill):not(.link-line) { color: var(--ls-accent); text-decoration: underline; text-underline-offset: 4px; }
.dressing-page .dr-intro__media .pimg img { aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 40%; border-radius: 0; }
.dressing-page .dr-link { color: var(--ls-ink); }
.dressing-page .btn-row { align-items: center; gap: 24px; }
/* Types: services-list rhythm with a one-line description under each title */
.dressing-page .dr-types__txt { display: grid; gap: 6px; flex: 1; }
.dressing-page .dr-types__txt small { font-size: 14px; line-height: 1.6; color: var(--ls-text); }
.dressing-page .dr-types__list a { align-items: center; }
.dressing-page .dr-types .svc__img img { object-position: 50% 45%; }
/* Organisation (dark): sticky photo that follows the hovered row + numbered rows */
.dressing-page .dr-org { padding-block: clamp(70px, 7vw, 100px); }
.dressing-page .dr-org .shead { margin-bottom: clamp(30px, 3vw, 44px); }
.dressing-page .dr-org__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
.dressing-page .dr-org__media { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 26px; background: #0d1a2f; --curtain: #0d1a2f; }
.dressing-page .dr-org__media .svc__img img { width: 100%; height: 100%; object-fit: cover; }
.dressing-page .dr-org__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.dressing-page .dr-org__list li { position: relative; padding: 18px 0 20px; border-top: 1px solid rgba(255, 255, 255, .12); cursor: default; outline-offset: 4px; }
.dressing-page .dr-org__list li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 100%; height: 1px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ls-ease); }
.dressing-page .dr-org__list li.is-active::before { transform: scaleX(1); }
.dressing-page .dr-org__n { display: block; margin-bottom: 8px; font: 700 28px/1 "Cal Sans", sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .45); transition: color .4s, -webkit-text-stroke-color .4s; }
.dressing-page .dr-org__list li.is-active .dr-org__n { color: var(--ls-accent); -webkit-text-stroke-color: var(--ls-accent); }
.dressing-page .dr-org__list h3 { margin-bottom: 8px; font-size: 21px; color: #fff; }
.dressing-page .dr-org__list p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .68); }
/* Space planning: asymmetric photo 58% + copy */
.dressing-page .dr-plan__grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.dressing-page .dr-plan__media .pimg img { aspect-ratio: 16 / 11; object-fit: cover; border-radius: 0; }
.dressing-page .dr-plan__list { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; }
.dressing-page .dr-plan__list li { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--ls-line); }
.dressing-page .dr-plan__list li > span { flex: none; font: 700 15px/1.6 "Golos Text", sans-serif; color: var(--ls-accent); }
.dressing-page .dr-plan__list h3 { margin-bottom: 4px; font-size: 20px; }
.dressing-page .dr-plan__list p { margin: 0; font-size: 15px; }
/* Trust: large typography, no cards */
.dressing-page .dr-trust__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.dressing-page .dr-trust__list li { padding: 10px 34px 10px 0; padding-inline: 34px; border-inline-start: 1px solid var(--ls-line); }
.dressing-page .dr-trust__list li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.dressing-page .dr-trust__list b { display: block; font: 700 clamp(56px, 6vw, 92px)/1 "Cal Sans", sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--ls-accent); text-align: start; }
.dressing-page .dr-trust__list h3 { margin: 22px 0 8px; font-size: 22px; }
.dressing-page .dr-trust__list p { margin: 0; font-size: 15px; }
/* Gallery lead link */
.dressing-page .dr-gallery .shead__lead a { color: var(--ls-accent); }
/* Closing CTA: cinematic photo band */
.dressing-page .dr-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 60vw, 720px); padding-block: 100px; color: #fff; scroll-margin-top: 80px; }
.dressing-page .dr-cta__bg { position: absolute; inset: 0; z-index: -2; }
.dressing-page .dr-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Darkens toward the text side, and melts into the navy footer at the bottom (no hard seam) */
.dressing-page .dr-cta__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 21, 39, 0) 45%, rgba(10, 21, 39, .85) 85%, #0a1527 100%), linear-gradient(90deg, rgba(6, 13, 26, .45), rgba(6, 13, 26, .9) 70%); }
.dressing-page .dr-cta { padding-bottom: 130px; }
.dressing-page .dr-cta__title { margin: 22px 0 16px; font-size: clamp(38px, 5vw, 76px); line-height: 1.18; color: #fff; }
.dressing-page .dr-cta__title em { font-style: normal; color: var(--ls-accent); }
.dressing-page .dr-cta__inner p { max-width: 520px; color: rgba(255, 255, 255, .85); font-size: 17px; }
.dressing-page .dr-cta__note { display: block; margin-top: 18px; color: rgba(255, 255, 255, .6); font-size: 14px; }
@media (max-width: 1199px) {
	.dressing-page .dr-org__grid { grid-template-columns: 1fr; }
	.dressing-page .dr-org__media { max-width: 560px; }
}
@media (max-width: 991px) {
	.dressing-page .dr-intro__grid, .dressing-page .dr-plan__grid { grid-template-columns: 1fr; }
	.dressing-page .dr-trust__list { grid-template-columns: 1fr; }
	.dressing-page .dr-trust__list li { padding: 24px 0; padding-inline: 0; border-inline-start: 0; border-top: 1px solid var(--ls-line); }
	.dressing-page .dr-trust__list li:first-child { border-top: 0; }
}
@media (max-width: 767px) {
	.dressing-page .dr-org__list { grid-template-columns: 1fr; }
	.dressing-page .dr-cta__shade { background: linear-gradient(to bottom, rgba(6, 13, 26, .75) 60%, #0a1527 100%); }
	.dressing-page .btn-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Star AI (LS AI) — project concierge (robot, panel, living project sheet, home section)
   ========================================================================== */
.lsai-star { display: inline-block; flex: none; width: 14px; height: 14px; background: var(--ls-accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* Star AI robot (drawn in inc/ai-robot.php): above the WhatsApp control, reacts per block */
.bot-cape { transform-origin: 60px 60px; }
.bot-jet { transform-box: fill-box; transform-origin: 50% 0; }
.bot-star { transform-origin: 60px 8px; }
.bot-eyes { transition: transform .25s ease-out; }
.bot-blink { transform-box: fill-box; transform-origin: center; }
.bot-arm { transform-origin: 87.5px 74px; }
:is(.lsai-bot, .lsai__avatar) .bot-cape { animation: bot-cape 1.6s ease-in-out infinite; }
:is(.lsai-bot, .lsai__avatar) .bot-jet { animation: bot-jet .18s ease-in-out infinite alternate; }
:is(.lsai-bot, .lsai__avatar) .bot-star { animation: lsai-twinkle 4.5s ease-in-out infinite; }
:is(.lsai-bot, .lsai__avatar) .bot-blink { animation: bot-blink 4.6s infinite; }
:is(.lsai-bot, .lsai__avatar) .bot-core use { animation: bot-core 2.4s ease-in-out infinite; }
.lsai-bot { position: fixed; bottom: 78px; inset-inline-end: 14px; z-index: 45; display: flex; align-items: flex-end; gap: 6px; padding: 0; border: 0; background: none; color: #fff; --lean: 0deg; transition: opacity .45s, transform .6s var(--ls-ease), visibility .45s; }
.lsai-bot__fig { display: block; width: 72px; height: 90px; filter: drop-shadow(0 10px 16px rgba(5, 11, 22, .35)); transform: rotate(var(--lean)); transition: transform .5s var(--ls-ease); }
.lsai-bot .bot { width: 100%; height: 100%; overflow: visible; animation: bot-bob 3.2s ease-in-out infinite; }
.lsai-bot:hover .lsai-bot__fig { transform: rotate(var(--lean)) scale(1.08); }
@keyframes bot-bob { 50% { transform: translateY(-6px); } }
@keyframes bot-cape { 50% { transform: skewX(-5deg) scaleY(.96); } }
@keyframes bot-jet { to { transform: scaleY(.7); opacity: .75; } }
@keyframes bot-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bot-core { 50% { opacity: .65; } }
@keyframes bot-wave { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-150deg); } 50% { transform: rotate(-120deg); } }
@keyframes lsai-twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.35) rotate(45deg); } }

/* Speech bubble: a hook + a line about the block */
.lsai-bot__bubble { position: relative; margin-bottom: 46px; padding: 10px 14px; background: var(--ls-dark); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; box-shadow: 0 14px 30px rgba(5, 11, 22, .3); text-align: start; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; pointer-events: none; transition: opacity .35s, transform .45s var(--ls-ease); }
[dir="rtl"] .lsai-bot__bubble { transform-origin: bottom left; }
.lsai-bot__bubble::after { content: ""; position: absolute; bottom: 14px; inset-inline-end: -6px; width: 10px; height: 10px; background: inherit; border: inherit; border-width: 1px 1px 0 0; transform: rotate(45deg); }
[dir="rtl"] .lsai-bot__bubble::after { border-width: 0 0 1px 1px; }
.lsai-bot__bubble b, .fab-bubble b { display: block; font: 700 14px/1.35 "Golos Text", "Tajawal", system-ui, sans-serif; color: #fff; text-align: right; }
[dir="ltr"] .lsai-bot__bubble b, [dir="ltr"] .fab-bubble b { text-align: left; }
.lsai-bot__bubble b::before, .fab-bubble b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 6px; background: var(--ls-accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.lsai-dock__txt { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.lsai-bot.is-talk .lsai-bot__bubble, .lsai-bot:hover .lsai-bot__bubble, .lsai-bot:focus-visible .lsai-bot__bubble { opacity: 1; transform: none; }
.lsai-bot.is-launching .lsai-bot__bubble { opacity: 0 !important; }
.lsai-bot.is-launching .bot-jet { animation-duration: .07s; }
.lsai-bot:focus-visible { outline: none; }
.lsai-bot:focus-visible .lsai-bot__fig { outline: 2px solid var(--ls-accent); outline-offset: 4px; border-radius: 20px; }

/* Launch out of the header logo: a red ring on the LS mark */
.lsai-launch { position: fixed; z-index: 60; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--ls-accent); border-radius: 50%; box-shadow: 0 0 22px var(--ls-accent), inset 0 0 10px var(--ls-accent); pointer-events: none; animation: lsai-ring 1.3s ease-out .3s both; }
@keyframes lsai-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(7); opacity: 0; } }

/* Hide control: shows only while the pointer rests on the robot (or after a long press) */
.lsai-bot__x { position: fixed; bottom: 150px; inset-inline-end: 8px; z-index: 46; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: var(--ls-dark); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .25s, transform .3s var(--ls-ease), background-color .2s; }
.lsai-bot__x.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.lsai-bot__x:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
.lsai-mini { position: fixed; bottom: 92px; inset-inline-end: 30px; z-index: 45; display: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: var(--ls-dark); box-shadow: 0 8px 20px rgba(5, 11, 22, .3); }
.lsai-mini .lsai-star { width: 13px; height: 13px; animation: lsai-twinkle 4.5s ease-in-out infinite; }
.lsai-mini:hover { background: #050b16; }
body.lsai-bot-off .lsai-bot { opacity: 0; visibility: hidden; transform: translateY(40px) scale(.6); pointer-events: none; }
body.lsai-bot-off .lsai-bot__x { display: none; }
body.lsai-bot-off .lsai-mini { display: grid; animation: lsai-pop .5s var(--ls-ease) .3s both; }
@keyframes lsai-pop { from { transform: scale(0); opacity: 0; } }

/* Arrival (--dir: 1 in Arabic, -1 in English) and one move per block (data-ai-move) */
.lsai-bot.is-arriving .lsai-bot__fig { animation: bot-arrive 1.4s var(--ls-ease) both; }
.lsai-bot.move-zoom .lsai-bot__fig { animation: bot-patrol 2.2s var(--ls-ease-2) both; }
.lsai-bot.move-zoom .bot-jet, .lsai-bot.move-hop .bot-jet { animation-duration: .09s; }
.lsai-bot.move-spin .lsai-bot__fig { animation: bot-spin 1.3s var(--ls-ease) both; }
.lsai-bot.move-hop .lsai-bot__fig { animation: bot-hop 1.1s ease-out both; }
.lsai-bot.move-nod .lsai-bot__fig { animation: bot-nod 1.2s ease-in-out both; }
.lsai-bot.move-peek .lsai-bot__fig, .lsai-bot.move-point .lsai-bot__fig { animation: bot-peek 2s var(--ls-ease) both; }
.lsai-bot.move-point .bot-arm { animation: bot-point 2s var(--ls-ease) both; }
.lsai-bot.move-wave .bot-arm { animation: bot-wave 1.4s ease-in-out 2; }
@keyframes bot-spin { 0% { transform: none; } 45% { transform: translateY(-34px) rotate(calc(var(--dir) * 200deg)) scale(1.1); } 100% { transform: rotate(calc(var(--dir) * 360deg)); } }
@keyframes bot-hop { 0%, 100% { transform: none; } 25% { transform: translateY(-26px); } 45% { transform: translateY(0) scaleY(.92); } 65% { transform: translateY(-14px); } 82% { transform: translateY(0) scaleY(.96); } }
@keyframes bot-nod { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(calc(var(--dir) * -9deg)); } 40%, 80% { transform: rotate(calc(var(--dir) * 7deg)); } }
@keyframes bot-peek { 0%, 100% { transform: none; } 30%, 70% { transform: translateX(calc(var(--dir) * 26px)) rotate(calc(var(--dir) * 12deg)); } }
@keyframes bot-point { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-95deg); } }
@keyframes bot-arrive { from { transform: translate(calc(var(--dir) * -90px), 140px) rotate(calc(var(--dir) * 25deg)) scale(.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes bot-patrol {
	0% { transform: none; }
	28% { transform: translate(calc(var(--dir) * 150px), -110px) rotate(calc(var(--dir) * 14deg)); }
	52% { transform: translate(calc(var(--dir) * 70px), -190px) rotate(calc(var(--dir) * -10deg)) scale(.92); }
	78% { transform: translate(calc(var(--dir) * 14px), -40px) rotate(calc(var(--dir) * 6deg)); }
	100% { transform: none; }
}
.lsai-bot.is-quiet .bot-star { animation: none; }

/* Panel avatar: the same robot, small */
.lsai__avatar { display: block; flex: none; width: 40px; height: 50px; }
.lsai__avatar .bot { width: 100%; height: 100%; overflow: visible; }
.lsai-lock, .lsai-lock body { overflow: hidden; }

/* Panel */
.lsai { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end; padding: 24px; }
.lsai[hidden] { display: none; }
.lsai__scrim { position: absolute; inset: 0; background: rgba(5, 11, 22, .55); opacity: 0; transition: opacity .35s; }
.lsai__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; width: min(880px, 100%); height: min(640px, calc(100vh * var(--z) - 48px)); background: var(--ls-surface); color: var(--ls-ink); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(24px); transition: opacity .35s, transform .5s var(--ls-ease); }
.lsai.is-open .lsai__scrim { opacity: 1; }
.lsai.is-open .lsai__box { opacity: 1; transform: none; }
.lsai__chat { display: flex; flex-direction: column; min-height: 0; }
.lsai__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--ls-line); }
.lsai__head b { display: block; font: 700 16px/1.2 var(--ls-font-display); letter-spacing: .04em; }
.lsai__head small { display: block; color: var(--ls-text); font-size: 12.5px; }
.lsai__x { margin-inline-start: auto; width: 38px; height: 38px; border: 1px solid var(--ls-line); border-radius: 50%; background: none; font-size: 22px; line-height: 1; }
.lsai__x:hover { background: var(--ls-ink); color: #fff; }
.lsai__project { padding: 9px 22px; background: var(--ls-bg); font-size: 13px; color: var(--ls-text); }
.lsai__project b { color: var(--ls-ink); }
.lsai__project button { margin-inline-start: 8px; padding: 0; border: 0; background: none; color: var(--ls-accent); font-size: 12.5px; text-decoration: underline; }
.lsai__log { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lsai-msg { max-width: 86%; }
.lsai-msg p { margin: 0; padding: 12px 16px; font-size: 15px; line-height: 1.75; }
.lsai-msg--ai p { background: var(--ls-bg); border-inline-start: 2px solid var(--ls-accent); }
.lsai-msg--me { align-self: flex-end; }
.lsai-msg--me p { background: var(--ls-ink); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.lsai-msg.is-new { animation: lsai-in .5s var(--ls-ease) both; }
@keyframes lsai-in { from { opacity: 0; transform: translateY(8px); } }
.lsai-note { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--ls-line); font-size: 11.5px; color: var(--ls-text); }
.lsai__think { display: flex; align-items: center; gap: 8px; padding: 0 22px 8px; font-size: 13px; color: var(--ls-text); }
.lsai__think[hidden] { display: none; }
.lsai__think i { width: 8px; height: 8px; background: var(--ls-accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: lsai-spin 1s linear infinite; }
@keyframes lsai-spin { to { transform: rotate(360deg) scale(1.3); } }
.lsai__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 12px; }
.lsai-chip { padding: 8px 14px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); font-size: 13.5px; transition: border-color .25s, background-color .25s, color .25s; }
.lsai-chip:hover, .lsai-chip.is-on { border-color: var(--ls-ink); background: var(--ls-ink); color: #fff; }
.lsai-chip.is-primary { border-color: var(--ls-accent); background: var(--ls-accent); color: #fff; }
.lsai-chip.is-primary:hover { background: var(--ls-accent-hover); }
.lsai__form { display: flex; align-items: center; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--ls-line); }
.lsai__form input[name=q] { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-bg); font: inherit; font-size: 15px; color: var(--ls-ink); }
.lsai__form input[name=q]:focus { outline: none; border-color: var(--ls-ink); }
.lsai__hp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lsai__mic, .lsai__send { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ls-bg); color: var(--ls-ink); }
.lsai__mic[hidden] { display: none; }
.lsai__mic.is-on { background: var(--ls-accent); color: #fff; animation: lsai-pulse 1.2s ease-in-out infinite; }
@keyframes lsai-pulse { 50% { box-shadow: 0 0 0 8px rgba(237, 41, 38, .18); } }
.lsai__send { background: var(--ls-accent); color: #fff; }
.lsai__send:hover { background: var(--ls-accent-hover); }

/* Living project sheet */
.lsai__sheet { display: flex; flex-direction: column; min-height: 0; background: var(--ls-dark); color: #fff; }
.lsai__sheet-head { position: relative; padding: 22px 22px 18px; border-bottom: 1px solid var(--ls-line-light); }
.lsai__sheet-head::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: calc(var(--lsai-fill, 0) * 100%); background: var(--ls-accent); transition: width .8s var(--ls-ease); }
.lsai__sheet-head small { display: block; color: var(--ls-accent); font: 700 11px/1 var(--ls-font-display); letter-spacing: .18em; }
.lsai__sheet-head b { display: block; margin-top: 8px; font-size: 18px; }
.lsai__ref { position: absolute; top: 22px; inset-inline-end: 22px; font: 600 12px/1 var(--ls-font-display); color: rgba(255, 255, 255, .6); letter-spacing: .06em; }
.lsai__fields { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; margin: 0; padding: 14px 22px; }
.lsai-f { position: relative; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.lsai-f dt { font-size: 12px; color: rgba(255, 255, 255, .55); }
.lsai-f dd { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-weight: 600; font-size: 14.5px; }
.lsai-f dd span { color: rgba(255, 255, 255, .25); }
.lsai-f dd button { margin-inline-start: auto; padding: 0 4px; border: 0; background: none; color: rgba(255, 255, 255, .45); font-size: 13px; }
.lsai-f dd button:hover { color: var(--ls-accent); }
.lsai-f.is-ink dd { animation: lsai-ink .9s var(--ls-ease) both; }
.lsai-f.is-ink::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ls-accent); transform-origin: right; animation: lsai-line 1.1s var(--ls-ease) both; }
@keyframes lsai-ink { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes lsai-line { from { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } to { opacity: 0; } }
.lsai__sheet-foot { display: grid; gap: 8px; padding: 16px 22px 20px; border-top: 1px solid var(--ls-line-light); }
.lsai__go, .lsai__visit { min-height: 46px; border: 0; border-radius: 999px; font: 600 14px/1 var(--ls-font-display); transition: background-color .3s, opacity .3s; }
.lsai__go { background: var(--ls-accent); color: #fff; }
.lsai__go:hover { background: var(--ls-accent-hover); }
.lsai__visit { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--ls-line-light); }
.lsai__go:disabled, .lsai__visit:disabled { opacity: .35; cursor: default; }
.lsai__privacy { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); }

/* Priority comparison card */
.lsai-card { max-width: 100%; background: var(--ls-surface); border: 1px solid var(--ls-line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.lsai-msg:has(.lsai-card) { max-width: 100%; width: 100%; }
.lsai-card__head { padding: 12px 16px; background: var(--ls-dark); color: #fff; }
.lsai-card__head small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.lsai-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 12px 16px; border-bottom: 1px solid var(--ls-line); }
.lsai-card__row span { grid-column: 1 / -1; margin-bottom: 6px; color: var(--ls-accent); font-weight: 700; font-size: 13px; }
.lsai-card__row p { margin: 0; padding: 0; background: none; border: 0; font-size: 13.5px; line-height: 1.65; }
.lsai-card__row p b { display: block; font-size: 12px; color: var(--ls-ink); }
.lsai-card__foot { margin: 0; padding: 10px 16px !important; font-size: 12.5px !important; color: var(--ls-text); background: none !important; border: 0 !important; }

@media (max-width: 899px) {
	.lsai { padding: 0; grid-template-columns: minmax(0, 1fr); place-items: end stretch; }
	.lsai__box { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: calc(100dvh - 40px); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
	.lsai__sheet { max-height: 64px; overflow: hidden; transition: max-height .5s var(--ls-ease); }
	.lsai__sheet-head { padding: 14px 18px; cursor: pointer; }
	.lsai__sheet-head b { margin: 0; font-size: 15px; }
	.lsai__sheet-head small { display: none; }
	.lsai__ref { top: 18px; }
	.lsai.is-sheet .lsai__sheet { max-height: 70dvh; }
	.lsai__head, .lsai__log, .lsai__form { padding-inline: 16px; }
	.lsai__chips { padding-inline: 16px; }
	.lsai-bot { bottom: calc(70px + env(safe-area-inset-bottom)); inset-inline-end: 8px; }
	.lsai-bot__fig { width: 58px; height: 72px; }
	.lsai-bot__x { bottom: 128px; inset-inline-end: 2px; }
	.lsai-mini { bottom: calc(80px + env(safe-area-inset-bottom)); inset-inline-end: 22px; }
	.lsai-bot__bubble { margin-bottom: 34px; padding: 8px 12px; }
	.lsai-bot__bubble b { font-size: 13px; }
}

/* Home: LIGHT STAR INTELLIGENCE — the fabrication stage */
.lsai-home { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 28% 50%, #13264a 0%, #0a1527 55%, #060d1a 100%); color: rgba(255, 255, 255, .78); }
.lsai-home__grid-bg { -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 15%, transparent 72%); position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 30% 50%, #000 15%, transparent 72%); }
.lsai-home__in { position: relative; display: grid; grid-template-columns: 5fr 6fr; gap: 60px; align-items: center; }
.lsai-home__title { margin: 22px 0 20px; color: #fff; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.25; font-weight: 700; }
.lsai-home__title em { font-style: normal; color: var(--ls-accent); }
.lsai-home__lead { max-width: 540px; font-size: 16.5px; }
.lsai-home__note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* The four steps: HUD modules that follow the build, then stay clickable */
.fab-steps { position: relative; margin: 26px 0 30px; padding: 0; list-style: none; display: grid; gap: 10px; }
.fab-steps li { position: relative; }
.fab-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 34px; top: 100%; width: 1px; height: 10px; background: rgba(255, 255, 255, .16); }
.fab-steps li:has(.is-done):not(:last-child)::after { background: var(--ls-accent); box-shadow: 0 0 8px var(--ls-accent); }
.fab-step { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 16px 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); color: inherit; text-align: start; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: border-color .4s, background-color .4s, box-shadow .4s; }
.fab-step:hover { border-color: rgba(255, 255, 255, .22); }
/* a light beam sweeps the active module */
.fab-step::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 90, 80, .16) 48%, rgba(255, 255, 255, .1) 50%, transparent 66%); transform: translateX(-120%); pointer-events: none; }
.fab-step.is-on::after { animation: fab-beam 2.2s ease-in-out infinite; }
@keyframes fab-beam { to { transform: translateX(120%); } }
/* corner ticks */
.fab-step::before { content: ""; position: absolute; top: 6px; inset-inline-start: 6px; width: 8px; height: 8px; border-top: 1px solid rgba(255, 255, 255, .3); border-inline-start: 1px solid rgba(255, 255, 255, .3); transition: border-color .4s; }
.fab-step.is-on::before, .fab-step.is-done::before { border-color: var(--ls-accent); }
.fab-step i { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 44px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .55); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: color .4s, background-color .4s; }
.fab-step.is-on i { background: rgba(237, 41, 38, .18); color: #fff; }
.fab-step.is-done i { background: rgba(237, 41, 38, .1); }
.fab-step small { display: block; font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .4); direction: ltr; text-align: end; }
[dir="rtl"] .fab-step small { text-align: right; }
.fab-step__txt { flex: 1; min-width: 0; }
.fab-step__status { position: absolute; top: 12px; right: 16px; display: inline-flex; align-items: center; gap: 6px; direction: ltr; font: 700 9.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .35); }
[dir="rtl"] .fab-step__status { right: auto; left: 16px; }
.fab-step__status em { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.fab-step.is-on .fab-step__status { color: #ff6a63; }
.fab-step.is-on .fab-step__status em { background: #ff3b36; box-shadow: 0 0 8px #ff3b36; animation: fab-led .8s steps(2) infinite; }
.fab-step.is-done .fab-step__status { color: rgba(255, 255, 255, .6); }
.fab-step.is-done .fab-step__status em { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
@keyframes fab-led { 50% { opacity: .25; } }
.fab-step__bar { position: absolute; inset-inline: 16px; bottom: 7px; height: 2px; background: rgba(255, 255, 255, .06); }
.fab-step__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--ls-accent); box-shadow: 0 0 8px var(--ls-accent); }
.fab-step.is-on .fab-step__bar i { width: 100%; transition: width var(--dur, 1.4s) linear; }
.fab-step.is-done .fab-step__bar i { width: 100%; }
.fab-step__num { position: absolute; inset-inline-end: 14px; bottom: 2px; font: 800 44px/1 "Cal Sans", system-ui, sans-serif; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06); pointer-events: none; }
.fab-step.is-on .fab-step__num { -webkit-text-stroke-color: rgba(237, 41, 38, .35); }
.fab-step b { display: block; margin-top: 6px; color: #fff; font-size: 16px; }
.fab-step__txt > span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .6); }
.js .fab-step__txt > span { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height .5s var(--ls-ease), opacity .4s, margin-top .4s; }
.js .fab-step.is-on .fab-step__txt > span { max-height: 80px; opacity: 1; margin-top: 4px; }
.fab-step.is-on { border-color: rgba(237, 41, 38, .6); background: linear-gradient(180deg, rgba(237, 41, 38, .12), rgba(237, 41, 38, .03)); box-shadow: inset 0 0 30px rgba(237, 41, 38, .08); }
.fab-step.is-done { border-color: rgba(237, 41, 38, .25); }

/* Stage */
.fab-stage { position: relative; width: min(580px, 100%); aspect-ratio: 1; margin-inline: auto; --px: 0; --py: 0; }
.fab { display: block; width: 100%; height: 100%; overflow: visible; }
.fab-hud { opacity: 0; transform: translate(calc(var(--px) * -16px), calc(var(--py) * -16px)); transition: opacity 1.2s, transform .6s ease-out; }
.is-s1 .fab-hud { opacity: 1; }
.fab-trace { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.2; }
.fab-pulse { fill: none; stroke: #ff3b36; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 16 600; stroke-dashoffset: 616; animation: fab-flow 3.6s linear infinite; filter: drop-shadow(0 0 4px #ff3b36); }
.fab-hud .fab-pulse:nth-child(4) { animation-delay: -1.1s; }
.fab-hud .fab-pulse:nth-child(6) { animation-delay: -2.3s; }
.fab-hud .fab-pulse:nth-child(8) { animation-delay: -.6s; }
.fab-hud .fab-pulse:nth-child(10) { animation-delay: -1.8s; }
.fab-hud .fab-pulse:nth-child(12) { animation-delay: -2.9s; }
@keyframes fab-flow { to { stroke-dashoffset: 0; } }
.fab-ring { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1; transform-box: view-box; transform-origin: 300px 300px; animation: fab-rot 50s linear infinite; }
.fab-ring--rev { stroke: rgba(237, 41, 38, .45); stroke-width: 2; animation-duration: 34s; animation-direction: reverse; }
.fab-ring--thin { stroke: rgba(255, 255, 255, .08); animation: none; }
.fab-arc { stroke: #ff3b36; stroke-width: 2.5; stroke-linecap: round; animation-duration: 9s; filter: drop-shadow(0 0 6px #ff3b36); }
@keyframes fab-rot { to { transform: rotate(360deg); } }
.fab-bracket { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.fab-glow { opacity: .45; transition: opacity 1s; }
.is-s4 .fab-glow { opacity: 1; animation: fab-breathe 4s ease-in-out infinite; }
@keyframes fab-breathe { 50% { opacity: .6; } }

/* 1 · Material: the LS mark draws itself, then fills */
.fab-logo { transform-box: view-box; transform-origin: 300px 300px; transition: transform 1s cubic-bezier(.7, 0, .2, 1), opacity .5s; }
.fab-logo polygon { fill: rgba(237, 41, 38, 0); stroke: #ff3b36; stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ls-ease), fill .7s .9s; }
.is-s1 .fab-logo polygon { stroke-dashoffset: 0; fill: #ed2926; }
.is-s1 .fab-logo { filter: drop-shadow(0 0 26px rgba(237, 41, 38, .55)); }
/* 3 · the mark shrinks into the robot's chest core */
.is-s3 .fab-logo { transform: translate(0, 10px) scale(.087); }
.is-s4 .fab-logo { opacity: 0; transition: opacity .15s; }

/* 2 · Design: the robot's blueprint */
.fab-wire { opacity: 0; transition: opacity .6s; }
.is-s2 .fab-wire { opacity: 1; }
.fab-wire * { fill: none !important; stroke: rgba(255, 255, 255, .6); stroke-width: .55; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s var(--ls-ease); }
.is-s2 .fab-wire * { stroke-dashoffset: 0; }
.is-s4 .fab-wire { opacity: 0; }

/* 3 · Manufacturing: laser print from the bottom up */
.fab-scan { opacity: 0; transition: opacity .3s; }
.is-scan .fab-scan { opacity: 1; }
/* 3 · Manufacturing: the parts fly in one by one and snap onto the blueprint */
.fab-print :is(.bot-legs, .bot-torso, .bot-armL, .bot-arm, .bot-head) { opacity: 0; }
.is-s3 .fab-print .bot-legs { animation: fab-in-legs .6s cubic-bezier(.2, 1.35, .4, 1) both; }
.is-s3 .fab-print .bot-torso { animation: fab-in-torso .6s cubic-bezier(.2, 1.35, .4, 1) .25s both; }
.is-s3 .fab-print .bot-armL { animation: fab-in-armL .55s cubic-bezier(.2, 1.35, .4, 1) .55s both; }
.is-s3 .fab-print .bot-arm { animation: fab-in-armR .55s cubic-bezier(.2, 1.35, .4, 1) .7s both; }
.is-s3 .fab-print .bot-head { animation: fab-in-head .65s cubic-bezier(.2, 1.35, .4, 1) .95s both; }
.is-s4 .fab-print :is(.bot-legs, .bot-torso, .bot-armL, .bot-arm, .bot-head) { opacity: 1; }
@keyframes fab-in-legs { from { transform: translateY(70px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fab-in-torso { from { transform: translateY(85px) scale(.9); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fab-in-armL { from { transform: translate(-70px, 24px) rotate(-60deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fab-in-armR { from { transform: translate(70px, 24px) rotate(60deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes fab-in-head { from { transform: translateY(-95px) rotate(18deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.fab-weld { opacity: 0; }
.is-s3 .fab-weld { animation: fab-weld .7s var(--d) both; }
.fab-weld__ring { fill: none; stroke: #fff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.is-s3 .fab-weld__ring { animation: fab-weld-ring .6s var(--d) ease-out both; }
.fab-weld__spark { fill: #ffd6cd; transform-box: fill-box; transform-origin: center; }
.is-s3 .fab-weld__spark { animation: fab-weld-spark .6s var(--d) ease-out both; }
@keyframes fab-weld { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fab-weld-ring { from { transform: scale(.2); stroke: #fff; } to { transform: scale(2.6); stroke: #ff3b36; } }
@keyframes fab-weld-spark { from { transform: none; } to { transform: translate(var(--sx), var(--sy)) scale(.2); } }
.fab-spark { fill: #ffd6cd; transform-box: fill-box; animation: fab-spark .7s ease-out infinite; animation-delay: calc(var(--n) * -.12s); }
@keyframes fab-spark { from { transform: none; opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(.3); opacity: 0; } }
.fab-print .bot-jet, .fab-print .bot-core { opacity: 0; }
.fab-print .bot-visor, .fab-print .bot-eyes, .fab-print .bot-star { opacity: 0; }
.fab-print .bot-cape { opacity: 0; transform: scaleY(.05); }

/* 4 · Intelligence: core, visor, eyes, star, cape, jets, lift-off */
.fab-flash { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-s4 .fab-flash { animation: fab-flash .9s ease-out; }
@keyframes fab-flash { from { opacity: .95; transform: scale(.4); } to { opacity: 0; transform: scale(9); } }
.is-s4 .fab-print .bot-core { opacity: 1; transition: opacity .15s; }
.is-s4 .fab-print .bot-visor { opacity: .9; animation: fab-boot .7s .15s both; }
.is-s4 .fab-print .bot-eyes { opacity: 1; transition: opacity .2s .45s; }
.is-s4 .fab-print .bot-star { opacity: 1; transition: opacity .3s .7s; }
.is-s4 .fab-print .bot-cape { opacity: 1; transform: none; transition: transform .9s var(--ls-ease) .5s, opacity .2s .5s; }
.is-s4 .fab-print .bot-jet { opacity: 1; transition: opacity .3s .6s; }
@keyframes fab-boot { 0% { opacity: .1; } 20% { opacity: .9; } 30% { opacity: .2; } 45% { opacity: 1; } 60% { opacity: .4; } 100% { opacity: .9; } }
.fab-lift { transition: transform 1.4s var(--ls-ease); }
.is-s4 .fab-lift { transform: translateY(-18px); }
.is-live .fab-lift { animation: fab-hover 3.6s ease-in-out infinite; }
@keyframes fab-hover { 0%, 100% { transform: translateY(-18px); } 50% { transform: translateY(-32px); } }
.is-live .fab-print .bot-cape { animation: bot-cape 1.6s ease-in-out infinite; }
.is-live .fab-print .bot-jet { animation: bot-jet .18s ease-in-out infinite alternate; }
.is-live .fab-print .bot-blink { animation: bot-blink 4.6s infinite; }
.is-live .fab-print .bot-star { animation: lsai-twinkle 4.5s ease-in-out infinite; }
.is-live .fab-print .bot-core use { animation: bot-core 2.4s ease-in-out infinite; }
.is-talk .fab-print .bot-arm { animation: bot-wave 1.4s ease-in-out 2; }
.is-react .fab-print { transform-box: view-box; transform-origin: 300px 330px; animation: fab-react .9s var(--ls-ease); }
@keyframes fab-react { 35% { transform: translateY(-14px) scale(1.04); } }
[data-fab-bot] { cursor: pointer; }

/* Overlays: HUD text, speech bubble, progress, replay */
.fab-hudtxt { position: absolute; top: 3%; left: 7%; right: 7%; display: flex; justify-content: space-between; direction: ltr; font: 600 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .18em; color: rgba(255, 255, 255, .45); pointer-events: none; }
.fab-hudtxt__id { color: var(--ls-accent); }
.fab-bubble { position: absolute; top: 13%; left: 60%; max-width: 230px; padding: 10px 14px; background: rgba(10, 21, 39, .92); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px) scale(.92); transform-origin: left bottom; transition: opacity .35s, transform .45s var(--ls-ease); pointer-events: none; }
.fab-bubble::after { content: ""; position: absolute; left: -6px; bottom: 16px; width: 10px; height: 10px; background: inherit; border: inherit; border-width: 0 0 1px 1px; transform: rotate(45deg); }
.fab-bubble span, .fab-bubble__ask { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.fab-bubble__ask { padding: 0; border: 0; background: none; color: var(--ls-accent); font-weight: 700; cursor: pointer; }
.fab-bubble__ask:hover { text-decoration: underline; }
.is-talk .fab-bubble { opacity: 1; transform: none; pointer-events: auto; }
.fab-meter { position: absolute; bottom: 3%; left: 10%; right: 10%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 600 11px/1 "Golos Text", "Tajawal", system-ui, sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .6); pointer-events: none; }
.fab-meter__bar { position: relative; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.fab-meter__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--ls-accent); box-shadow: 0 0 10px var(--ls-accent); transition-property: width; transition-timing-function: linear; }
.fab-meter__pct { min-width: 3.2em; color: #fff; text-align: end; font-variant-numeric: tabular-nums; }
.fab-replay { position: absolute; top: 8%; left: 7%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .75); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .5s, border-color .25s, color .25s; }
.is-live .fab-replay { opacity: 1; pointer-events: auto; }
.fab-replay:hover { border-color: var(--ls-accent); color: #fff; }

@media (max-width: 991px) {
	.lsai-home__in { grid-template-columns: 1fr; gap: 30px; }
	.fab-stage { order: -1; width: min(460px, 100%); }
}
@media (max-width: 767px) {
	.fab-bubble { left: 54%; max-width: 170px; padding: 8px 11px; }
	.fab-bubble b { font-size: 12.5px; }
	.fab-hudtxt { font-size: 9px; }
	.fab-replay { top: auto; bottom: 10%; }
	.fab-step__status span { display: none; }
	.fab-step__status { top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.lsai-bot .bot, .lsai-bot [class], .lsai-bot__fig, .lsai__avatar [class], .fab-stage [class], .lsai-mini .lsai-star, .lsai__think i { animation: none !important; }
	.lsai__box, .lsai-msg.is-new, .lsai-f.is-ink dd, .lsai-f.is-ink::after, .fab-stage [class] { transition: none !important; }
}
button.ai-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; }
button.ai-link .lsai-star { width: 11px; height: 11px; }

/* Contact: Antra-style dark band — giant moving words, details beside a two-column form */
.ccta { position: relative; overflow: hidden; padding: 0 0 120px; background: var(--ls-dark); color: rgba(255, 255, 255, .75); }
.ccta::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.ccta__marquee { position: relative; overflow: hidden; padding: 40px 0 50px; direction: ltr; }
.ccta__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: ccta-marquee 42s linear infinite; }
.ccta__track span { font: 800 clamp(64px, 10.5vw, 170px)/1 "Cal Sans", "Tajawal", system-ui, sans-serif; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.ccta__track span:nth-of-type(even) { font-family: "Tajawal", system-ui, sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .88); }
.ccta__track .lsai-star { width: clamp(28px, 3.4vw, 54px); height: clamp(28px, 3.4vw, 54px); }
@keyframes ccta-marquee { to { transform: translateX(-50%); } }
.ccta__grid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: start; }
.ccta__title { margin: 20px 0 18px; color: #fff; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.25; font-weight: 700; }
.ccta__title em { font-style: normal; color: var(--ls-accent); }
.ccta__lead { max-width: 440px; margin-bottom: 34px; }
.ccta__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; padding-top: 28px; border-top: 1px solid var(--ls-line-light); }
.ccta__fact small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ccta__fact small svg { color: var(--ls-accent); }
.ccta__fact p { margin: 6px 0 0; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.6; }
.ccta__fact a:hover { color: var(--ls-accent); }
.ccta__socials { margin-top: 30px; }
/* the form on dark rounded fields, two columns (CF7 puts html_class on the <form> itself) */
form.ls-form--dark { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
form.ls-form--dark > p { margin: 0 0 16px; }
form.ls-form--dark > p:has(textarea), form.ls-form--dark > p:has([type="submit"]), form.ls-form--dark > .wpcf7-response-output { grid-column: 1 / -1; }
.ls-form--dark label br { display: none; }
.ls-form--dark label { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.ls-form--dark input:not([type="submit"]), .ls-form--dark select, .ls-form--dark textarea { display: block; width: 100%; margin-top: 8px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 15px; transition: border-color .25s, background-color .25s; }
.ls-form--dark textarea { min-height: 150px; border-radius: 20px; resize: vertical; }
.ls-form--dark select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .6) 50%), linear-gradient(135deg, rgba(255, 255, 255, .6) 50%, transparent 50%); background-position: 22px 50%, 27px 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ls-form--dark select option { color: var(--ls-ink); }
.ls-form--dark :is(input, select, textarea):focus { outline: none; border-color: var(--ls-accent); background-color: rgba(255, 255, 255, .09); }
.ls-form--dark ::placeholder { color: rgba(255, 255, 255, .35); }
.ls-form--dark [type="submit"] { display: inline-flex; align-items: center; min-height: 54px; margin-top: 6px; padding: 0 30px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: var(--ls-accent); color: #fff; font: 700 15px/1 var(--ls-font-display); cursor: pointer; transition: background-color .25s, transform .3s var(--ls-ease); }
.ls-form--dark [type="submit"]:hover { background: var(--ls-accent-hover); transform: translateY(-2px); }
.ls-form--dark .wpcf7-not-valid-tip { margin-top: 6px; color: #ff8a84; font-size: 13px; }
.ls-form--dark .wpcf7-response-output { border-radius: 14px; color: #fff; }
.map-band { background: #0d1a30; }
@media (max-width: 991px) {
	.ccta__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 575px) {
	form.ls-form--dark { grid-template-columns: 1fr; }
	.ccta__facts { grid-template-columns: 1fr; }
	.ccta { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ccta__track { animation: none; } }
.ls-form--dark .hidden-fields-container { display: none; }
.ccta__socials a { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.ccta__socials a:hover { background: var(--ls-accent) !important; border-color: var(--ls-accent) !important; }

/* Store: product page in the site's language */
.phero--product h1 { font-size: clamp(30px, 3.6vw, 52px); }
.woo div.product form.cart { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; }
.woo div.product form.cart .quantity input.qty { width: 74px; height: 52px; padding: 0 10px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); font: 600 16px/1 var(--ls-font-display); text-align: center; color: var(--ls-ink); }
.woo div.product form.cart .single_add_to_cart_button { min-height: 52px; padding: 0 34px !important; background: var(--ls-accent) !important; font-size: 16px !important; }
.woo div.product form.cart .single_add_to_cart_button:hover { background: var(--ls-accent-hover) !important; }
.woo div.product p.price { margin: 10px 0 18px; font-size: 26px !important; font-weight: 800 !important; }
.woo div.product .woocommerce-product-details__short-description { font-size: 16px; line-height: 1.9; }
.woo div.product .product_meta { padding-top: 18px; border-top: 1px solid var(--ls-line); font-size: 13.5px; color: var(--ls-text); }
.woo div.product .woocommerce-product-gallery img { border-radius: var(--ls-radius); }
.ls-buy-extra { margin: 6px 0 22px; }
.ls-buy-extra__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--ls-line); border-radius: 999px; color: var(--ls-ink); font: 600 15px/1 var(--ls-font-display); transition: border-color .25s, background-color .25s, color .25s; }
.ls-buy-extra__wa svg { color: #25d366; }
.ls-buy-extra__wa:hover { border-color: var(--ls-ink); background: var(--ls-ink); color: #fff; }
.ls-buy-extra__trust { display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 20px; list-style: none; border-radius: 16px; background: var(--ls-surface); }
.ls-buy-extra__trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ls-ink); }
.ls-buy-extra__trust svg { flex: none; color: var(--ls-accent); }

/* ==========================================================================
   Store: front page, product cards, cart → checkout → confirmation
   ========================================================================== */
.phero--shop h1 { font-size: clamp(30px, 3.6vw, 52px); }
.section--flow { padding-top: 60px; }

/* Hero slider */
.shero { padding: calc(var(--ls-header-h) + 30px) 0 40px; background: var(--ls-dark); }
.shero__frame { position: relative; min-height: 520px; overflow: hidden; border-radius: 26px; background: #0d1a30; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
.shero__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 5fr 6fr; align-items: center; opacity: 0; visibility: hidden; transition: opacity .8s var(--ls-ease), visibility .8s; }
.shero__slide.is-active { opacity: 1; visibility: visible; }
.shero__media { position: relative; height: 100%; order: 2; overflow: hidden; }
.shero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; }
.shero__slide.is-active .shero__media img { transform: none; }
.shero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 26, 48, 0) 55%, rgba(13, 26, 48, .95)); }
[dir="rtl"] .shero__media::after { background: linear-gradient(270deg, rgba(13, 26, 48, 0) 55%, rgba(13, 26, 48, .95)); }
.shero__text { position: relative; z-index: 1; padding: 50px 56px; color: rgba(255, 255, 255, .78); }
.shero__title { margin: 18px 0 16px; color: #fff; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.25; font-weight: 700; }
.shero__text > p { max-width: 440px; font-size: 16px; }
.shero__price { margin: 6px 0 4px; color: #fff; font: 800 26px/1.3 var(--ls-font-display); }
.shero__price del { opacity: .5; font-size: 18px; font-weight: 600; margin-inline-start: 8px; }
.shero__price ins { text-decoration: none; color: #ff6a63; }
.shero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.shero__actions .link-line { color: #fff; }
.shero__slide.is-active .shero__text > * { animation: shero-in .9s var(--ls-ease) both; }
.shero__slide.is-active .shero__text > :nth-child(2) { animation-delay: .08s; }
.shero__slide.is-active .shero__text > :nth-child(3) { animation-delay: .16s; }
.shero__slide.is-active .shero__text > :nth-child(4) { animation-delay: .24s; }
.shero__slide.is-active .shero__text > :nth-child(5) { animation-delay: .32s; }
@keyframes shero-in { from { opacity: 0; transform: translateY(18px); } }
.shero__nav { position: absolute; bottom: 26px; inset-inline-start: 56px; z-index: 6; display: flex; align-items: center; gap: 14px; }
.shero__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; transition: background-color .25s, border-color .25s; }
.shero__arrow:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
[dir="rtl"] .shero__arrow:not(.shero__arrow--next) svg { transform: scaleX(-1); }
[dir="ltr"] .shero__arrow--next svg { transform: scaleX(-1); }
.shero__dots { display: flex; gap: 8px; }
.shero__dots button { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .25); transition: width .4s var(--ls-ease), background-color .3s; }
.shero__dots button.is-active { width: 46px; background: var(--ls-accent); }

/* Trust strip */
.strust { background: var(--ls-dark); padding: 0 0 50px; }
.strust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strust__grid > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; color: rgba(255, 255, 255, .6); }
.strust__grid svg { grid-row: 1 / 3; color: var(--ls-accent); }
.strust__grid b { color: #fff; font-size: 15px; }
.strust__grid span { font-size: 13px; }

/* Section blocks */
.sblock { padding: 80px 0 30px; }
.sblock--alt { background: var(--ls-surface); padding-bottom: 60px; }
.sblock__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; margin-bottom: 34px; }
.sblock__head .eyebrow { width: 100%; }
.sblock__head h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 700; }
.sblock__head h2 em { font-style: normal; color: var(--ls-accent); }
.sblock__head .link-line { margin-inline-start: auto; }

/* Product cards */
.woo ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important; }
.woo ul.products li.product { position: relative; display: flex; flex-direction: column; padding: 10px 10px 18px !important; border: 1px solid var(--ls-line); border-radius: 20px !important; background: var(--ls-surface); text-align: start !important; transition: transform .45s var(--ls-ease), box-shadow .45s var(--ls-ease); }
.woo ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10, 21, 39, .12); }
.woo ul.products li.product > a:first-child { display: flex; flex-direction: column; flex: 1; }
.woo ul.products li.product img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px !important; margin: 0 0 14px !important; }
.woo .card-cat { display: block; margin: 0 6px 4px; font-size: 12.5px; font-weight: 600; color: var(--ls-accent); }
.woo ul.products .woocommerce-loop-product__title { margin: 0 6px 8px !important; padding: 0 !important; font-size: 16.5px !important; line-height: 1.5 !important; }
.woo ul.products .price { display: block; margin: auto 6px 14px !important; font-size: 17px !important; }
.woo ul.products .price del { opacity: .5; font-size: 14px; margin-inline-start: 6px; }
.woo ul.products .price ins { text-decoration: none; }
.woo ul.products .button { align-self: flex-start; margin: 0 6px !important; }
.woo ul.products .added_to_cart { display: inline-block; margin: 8px 6px 0; font-size: 13.5px; font-weight: 600; color: var(--ls-accent); }
.woo span.onsale, .woocommerce span.onsale { position: absolute; top: 20px !important; inset-inline-start: 20px; right: auto; left: auto; z-index: 2; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 6px 12px !important; border-radius: 999px !important; background: var(--ls-accent) !important; color: #fff; font: 700 12.5px/1 var(--ls-font-display) !important; }
.woocommerce-ordering select { padding: 10px 16px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); font: inherit; }

/* Shop by category */
.scats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.scat__cover { position: relative; display: block; height: 320px; overflow: hidden; border-radius: 22px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.scat__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ls-ease); }
.scat__cover:hover img { transform: scale(1.06); }
.scat__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(10, 21, 39, .9)); }
.scat__title { position: absolute; bottom: 24px; inset-inline-start: 28px; z-index: 1; color: #fff; font: 700 32px/1.2 var(--ls-font-display); }
.scat__title small { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.scat__children { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.scat__children a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); font-size: 14px; font-weight: 600; color: var(--ls-ink); transition: background-color .25s, color .25s, border-color .25s; }
.scat__children a b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ls-bg); font-size: 12px; color: var(--ls-text); }
.scat__children a:hover { background: var(--ls-ink); border-color: var(--ls-ink); color: #fff; }
.scat__children--bar { margin: 0 0 30px; }

/* Header bag */
.head-cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; transition: background-color .25s, border-color .25s; }
.head-cart:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
.head-cart__count { position: absolute; top: -4px; inset-inline-end: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ls-accent); color: #fff; font: 700 11px/1 var(--ls-font-display); }
.head-cart__count.is-empty { display: none; }

/* Steps: cart → details → confirmation */
.ssteps { display: flex; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; counter-reset: s; }
.ssteps li { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: var(--ls-surface); border: 1px solid var(--ls-line); color: var(--ls-text); font-weight: 600; }
.ssteps li span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ls-bg); color: var(--ls-ink); font: 700 14px/1 var(--ls-font-display); }
.ssteps li.is-on { border-color: var(--ls-accent); color: var(--ls-ink); box-shadow: 0 10px 26px rgba(237, 41, 38, .12); }
.ssteps li.is-on span { background: var(--ls-accent); color: #fff; }
.ssteps li.is-done span { background: var(--ls-ink); color: #fff; }

/* Cart + checkout */
.woo-flow .woocommerce-notices-wrapper:empty { display: none; }
.woo-flow table.shop_table { border: 1px solid var(--ls-line) !important; border-radius: 18px !important; overflow: hidden; background: var(--ls-surface); border-collapse: separate !important; }
.woo-flow table.shop_table th { background: var(--ls-bg); font-weight: 700; color: var(--ls-ink); }
.woo-flow table.shop_table td, .woo-flow table.shop_table th { padding: 16px 18px !important; border-color: var(--ls-line) !important; }
.woo-flow table.cart img { width: 72px !important; border-radius: 10px; }
.woo-flow .product-name a { font-weight: 700; color: var(--ls-ink); }
.woo-flow .quantity input.qty { width: 70px; height: 44px; border: 1px solid var(--ls-line); border-radius: 999px; text-align: center; font: 600 15px/1 var(--ls-font-display); }
.woo-flow a.remove { color: var(--ls-accent) !important; }
.woo-flow a.remove:hover { background: var(--ls-accent) !important; color: #fff !important; }
.woo-flow .coupon .input-text { height: 44px; padding: 0 16px !important; border: 1px solid var(--ls-line) !important; border-radius: 999px; min-width: 180px; }
.woo-flow .cart-collaterals .cart_totals { width: min(460px, 100%) !important; padding: 24px; border-radius: 20px; background: var(--ls-surface); border: 1px solid var(--ls-line); }
.woo-flow .cart_totals h2, .woo-flow #order_review_heading, .woo-flow .woocommerce-billing-fields h3, .woo-flow .woocommerce-additional-fields h3 { margin-bottom: 16px; font-size: 22px; font-weight: 700; }
.woo-flow .wc-proceed-to-checkout .checkout-button, .woo-flow #place_order { display: flex !important; justify-content: center; width: 100%; min-height: 56px; background: var(--ls-accent) !important; font-size: 17px !important; }
.woo-flow .wc-proceed-to-checkout .checkout-button:hover, .woo-flow #place_order:hover { background: var(--ls-accent-hover) !important; }
.woo-flow form.checkout { display: grid; grid-template-columns: 7fr 5fr; gap: 0 36px; align-items: start; }
.woo-flow form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woo-flow #customer_details { grid-column: 1; grid-row: 1 / 4; }
.woo-flow #customer_details .col-1, .woo-flow #customer_details .col-2 { float: none; width: 100%; }
.woo-flow #order_review_heading, .woo-flow #order_review { grid-column: 2; }
.woo-flow #order_review { position: sticky; top: calc(var(--ls-header-h) + 20px); padding: 22px; border-radius: 20px; background: var(--ls-surface); border: 1px solid var(--ls-line); }
.woo-flow #order_review table.shop_table { border: 0 !important; background: none; }
.woo-flow .form-row { margin: 0 0 16px !important; padding: 0 !important; }
.woo-flow .form-row label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ls-ink); font-size: 14px; }
.woo-flow .form-row .input-text, .woo-flow .form-row select, .woo-flow .form-row textarea, .woo-flow .select2-container .select2-selection--single { width: 100%; min-height: 50px; padding: 12px 18px !important; border: 1px solid var(--ls-line) !important; border-radius: 16px !important; background: var(--ls-surface) !important; font: inherit; font-size: 15px; color: var(--ls-ink); }
.woo-flow .select2-container .select2-selection--single .select2-selection__rendered { line-height: 24px; padding: 0 !important; }
.woo-flow .select2-container .select2-selection--single .select2-selection__arrow { top: 12px; }
.woo-flow .form-row textarea { min-height: 110px; }
.woo-flow .form-row .input-text:focus, .woo-flow .form-row textarea:focus { outline: none; border-color: var(--ls-accent) !important; }
.woo-flow #billing_country_field { display: none; }
.woo-flow #payment { border-radius: 16px !important; background: var(--ls-bg) !important; }
.woo-flow #payment ul.payment_methods { padding: 16px !important; border-color: var(--ls-line) !important; }
.woo-flow #payment div.payment_box { border-radius: 12px; background: var(--ls-surface) !important; color: var(--ls-text); }
.woo-flow #payment div.payment_box::before { display: none; }
.woo-flow .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--ls-text); }
.woo-flow .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px !important; padding: 0 !important; }
.woo-flow .woocommerce-order-overview li { margin: 0 !important; padding: 14px 18px !important; border: 1px solid var(--ls-line) !important; border-radius: 14px; background: var(--ls-surface); font-size: 13px !important; }
.sthanks { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin: 0 0 30px; padding: 24px 28px; border-radius: 20px; background: var(--ls-dark); color: rgba(255, 255, 255, .8); }
.sthanks p { margin: 0; flex: 1 1 320px; }
.sthanks b { color: #fff; font-size: 18px; }

@media (max-width: 1199px) {
	.woo ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 991px) {
	.shero__frame { min-height: 0; }
	.shero__slide { position: relative; grid-template-columns: 1fr; display: none; }
	.shero__slide.is-active { display: grid; }
	.shero__media { order: 0; height: 260px; }
	.shero__media::after { background: linear-gradient(180deg, rgba(13, 26, 48, 0) 50%, rgba(13, 26, 48, .95)) !important; }
	.shero__text { padding: 26px 24px 90px; }
	.shero__nav { inset-inline-start: 24px; }
	.strust__grid { grid-template-columns: 1fr 1fr; }
	.scats { grid-template-columns: 1fr; }
	.woo-flow form.checkout { grid-template-columns: 1fr; }
	.woo-flow #customer_details, .woo-flow #order_review_heading, .woo-flow #order_review { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 767px) {
	.woo ul.products { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
	.woo ul.products .woocommerce-loop-product__title { font-size: 14.5px !important; }
	.ssteps li { padding: 10px 12px; font-size: 13px; }
	.ssteps li span { width: 24px; height: 24px; font-size: 12px; }
	.head-cart { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.shero__slide, .shero__media img, .shero__slide.is-active .shero__text > * { transition: none; animation: none; transform: none; }
}
.sblock__head .link-line { color: var(--ls-ink); }

/* Cart: products beside a sticky totals box; one tidy notice */
.woo-flow .woocommerce:has(.woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 30px; align-items: start; }
.woo-flow .woocommerce:has(.woocommerce-cart-form) > :not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
.woo-flow .woocommerce-cart-form { grid-column: 1; }
.woo-flow .cart-collaterals { grid-column: 2; position: sticky; top: calc(var(--ls-header-h) + 20px); }
.woo-flow .cart-collaterals .cart_totals { float: none !important; width: 100% !important; }
.woo-flow .woocommerce-message, .woo-flow .woocommerce-info, .woo-flow .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px !important; padding: 14px 20px 14px 20px !important; border: 1px solid var(--ls-line) !important; border-radius: 14px; background: var(--ls-surface) !important; color: var(--ls-ink); }
.woo-flow .woocommerce-message::before, .woo-flow .woocommerce-info::before { position: static !important; margin: 0; }
.woo-flow .woocommerce-message:focus, .woo-flow .woocommerce-notices-wrapper:focus { outline: none; }
.woo-flow .woocommerce-message .wc-forward { display: none !important; }
.woo-flow .woocommerce-notices-wrapper ~ .woocommerce-notices-wrapper .woocommerce-message { display: none !important; }
.ls-cart-trust { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ls-cart-trust li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ls-text); }
.ls-cart-trust svg { color: var(--ls-accent); flex: none; }
.ls-cart-more { display: inline-block; margin-top: 16px; color: var(--ls-ink); font-weight: 600; }
.woo-flow .cart-empty.woocommerce-info { justify-content: center; padding: 30px !important; font-size: 17px; }
.woo-flow .return-to-shop .button { background: var(--ls-accent) !important; }
@media (max-width: 991px) {
	.woo-flow .woocommerce:has(.woocommerce-cart-form) { grid-template-columns: 1fr; }
	.woo-flow .cart-collaterals { grid-column: 1; position: static; margin-top: 24px; }
}

/* Clients page: navy logo wall + one filterable directory */
.cwall { position: relative; overflow: hidden; padding: 90px 0 80px; background: var(--ls-dark); }
.cwall::before { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); pointer-events: none; }
.cwall__head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px; }
.cwall__title { margin-top: 16px; color: #fff; font-size: clamp(30px, 3.4vw, 50px); font-weight: 700; }
.cwall__title em { font-style: normal; color: var(--ls-accent); }
.cwall__stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.cwall__stats div { min-width: 120px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.cwall__stats dt { color: #fff; font: 800 30px/1 var(--ls-font-display); }
.cwall__stats dd { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-size: 13px; }
.cwall__row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); position: relative; overflow: hidden; padding: 8px 0; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cwall__track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; list-style: none; animation: cwall-move 60s linear infinite; }
.cwall__row--rev .cwall__track { animation-direction: reverse; animation-duration: 70s; }
.cwall__row:hover .cwall__track { animation-play-state: paused; }
@keyframes cwall-move { to { transform: translateX(-50%); } }
.cwall__tile { display: flex; align-items: center; justify-content: center; width: 220px; height: 120px; padding: 18px 26px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .4s var(--ls-ease); }
.cwall__tile:hover { transform: translateY(-4px) scale(1.03); }
.cwall__tile img { display: block; width: 100%; height: 84px; object-fit: contain; }

.cdir { padding-top: 90px; }
.cdir__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 30px; margin-bottom: 26px; }
.cdir__title { margin-top: 14px; font-size: clamp(28px, 3vw, 42px); font-weight: 700; }
.cdir__title em { font-style: normal; color: var(--ls-accent); }
.cdir__search { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); height: 52px; padding: 0 20px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); color: var(--ls-text); }
.cdir__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ls-ink); outline: none; }
.cdir__tabs { position: sticky; top: calc(var(--ls-header-h) - 10px); z-index: 5; display: flex; gap: 10px; margin: 0 0 22px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; background: var(--ls-bg); }
.cdir__tabs::-webkit-scrollbar { display: none; }
.cdir__tab { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); color: var(--ls-ink); font: 600 14.5px/1 var(--ls-font-body); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.cdir__tab svg { color: var(--ls-accent); }
.cdir__tab b { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--ls-bg); font: 700 12.5px/1 var(--ls-font-display); color: var(--ls-text); }
.cdir__tab:hover { border-color: var(--ls-ink); }
.cdir__tab.is-on { background: var(--ls-dark); border-color: var(--ls-dark); color: #fff; box-shadow: 0 12px 26px rgba(10, 21, 39, .18); }
.cdir__tab.is-on b { background: var(--ls-accent); color: #fff; }
.cdir__intro { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 16px 20px; border-radius: 16px; background: var(--ls-surface); border-inline-start: 3px solid var(--ls-accent); color: var(--ls-text); }
.cdir__intro svg { flex: none; margin-top: 3px; color: var(--ls-accent); }
.cdir__intro b { color: var(--ls-ink); }
.cdir__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ccard2 { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--ls-line); border-radius: 18px; background: var(--ls-surface); transition: transform .4s var(--ls-ease), box-shadow .4s var(--ls-ease), border-color .3s; }
.ccard2:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10, 21, 39, .1); border-color: transparent; }
.is-filtering .ccard2:not([hidden]) { animation: ccard-in .5s var(--ls-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes ccard-in { from { opacity: 0; transform: translateY(10px); } }
.ccard2__logo { display: flex; align-items: center; justify-content: center; height: 110px; padding: 14px 20px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--ls-line); }
.ccard2__logo img { display: block; width: 100%; height: 80px; object-fit: contain; }
.ccard2__mono { position: relative; display: grid; place-items: center; height: 110px; border-radius: 12px; background: linear-gradient(135deg, var(--ls-dark), #16284a); overflow: hidden; }
.ccard2__mono span { color: #fff; font: 800 48px/1 var(--ls-font-display); opacity: .92; }
.ccard2__mono span.is-latin { font-family: "Cal Sans", system-ui, sans-serif; }
.ccard2__mono i { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(237, 41, 38, .9); color: #fff; }
.ccard2__mono::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 18px 18px; }
.ccard2__text b { display: block; color: var(--ls-ink); font-size: 15px; line-height: 1.5; }
.ccard2__text small { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; color: var(--ls-text); font-size: 12.5px; line-height: 1.5; }
.ccard2__text small svg { flex: none; margin-top: 3px; color: var(--ls-accent); }
.cdir__empty { padding: 40px 0; text-align: center; color: var(--ls-text); }
@media (max-width: 1199px) { .cdir__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
	.cdir__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ccard2 { padding: 10px; gap: 10px; }
	.ccard2__logo, .ccard2__mono { height: 84px; }
	.ccard2__logo img { height: 58px; }
	.cwall__tile img { height: 60px; }
	.cwall__tile { width: 160px; height: 90px; padding: 12px 16px; }
	.cwall { padding: 60px 0; }
}
@media (prefers-reduced-motion: reduce) { .cwall__track { animation: none; } .is-filtering .ccard2 { animation: none; } }
.cdir__intro[hidden], .ccard2[hidden] { display: none !important; }

/* Blog front: magazine slider of the 4 latest articles */
.bfeat { position: relative; overflow: hidden; padding: calc(var(--ls-header-h) + 40px) 0 70px; background: var(--ls-dark); color: rgba(255, 255, 255, .75); }
.bfeat::before { -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%); pointer-events: none; }
.bfeat .container { position: relative; }
.bfeat__head { max-width: 620px; margin-bottom: 36px; }
.bfeat__h1 { margin: 16px 0 12px; color: #fff; font-size: clamp(34px, 4vw, 58px); font-weight: 800; }
.bfeat__h1 em { font-style: normal; color: var(--ls-accent); }
.bfeat__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: stretch; }
.bfeat__stage { position: relative; min-height: 520px; overflow: hidden; border-radius: 24px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); background: #0d1a30; }
.bfeat__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ls-ease), visibility .9s; }
.bfeat__slide.is-active { opacity: 1; visibility: visible; }
.bfeat__img, .bfeat__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bfeat__img img { transform: scale(1.1); transition: transform 8s ease-out; }
.bfeat__slide.is-active .bfeat__img img { transform: scale(1); }
.bfeat__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 21, 39, .1) 20%, rgba(10, 21, 39, .92) 85%); }
.bfeat__body { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 44px; }
.bfeat__slide.is-active .bfeat__body > * { animation: shero-in .9s var(--ls-ease) both; }
.bfeat__slide.is-active .bfeat__body > :nth-child(2) { animation-delay: .08s; }
.bfeat__slide.is-active .bfeat__body > :nth-child(3) { animation-delay: .16s; }
.bfeat__slide.is-active .bfeat__body > :nth-child(4) { animation-delay: .24s; }
.bfeat__slide.is-active .bfeat__body > :nth-child(5) { animation-delay: .32s; }
.bfeat__cat { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ls-accent); color: #fff; font-size: 13px; font-weight: 700; }
.bfeat__title { margin: 16px 0 12px; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.35; font-weight: 800; }
.bfeat__title a { color: #fff; }
.bfeat__title a:hover { color: #ffd6d4; }
.bfeat__excerpt { max-width: 640px; margin: 0 0 16px; color: rgba(255, 255, 255, .78); font-size: 16px; }
.bfeat__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.bfeat__meta span { display: inline-flex; align-items: center; gap: 6px; }
.bfeat__meta svg { color: var(--ls-accent); }
.bfeat__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bfeat__list li { flex: 1; }
.bfeat__item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 110px; padding: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .7); text-align: start; transition: background-color .3s, border-color .3s; }
.bfeat__item:hover { background: rgba(255, 255, 255, .07); }
.bfeat__item.is-active { border-color: rgba(237, 41, 38, .6); background: rgba(237, 41, 38, .08); color: #fff; }
.bfeat__thumb { flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: 12px; }
.bfeat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bfeat__itext small { display: block; margin-bottom: 4px; color: var(--ls-accent); font: 800 13px/1 var(--ls-font-display); }
.bfeat__itext b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.55; font-weight: 700; }
.bfeat__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; }
[dir="ltr"] .bfeat__bar { transform-origin: left; }
.bfeat__item.is-run .bfeat__bar { animation: bfeat-bar var(--bfeat-ms, 7s) linear both; }
.bfeat.is-paused .bfeat__bar { animation-play-state: paused; }
@keyframes bfeat-bar { to { transform: scaleX(1); } }
@media (max-width: 991px) {
	.bfeat__grid { grid-template-columns: 1fr; }
	.bfeat__stage { min-height: 460px; }
	.bfeat__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
	.bfeat__list li { flex: 0 0 78%; }
	.bfeat__body { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.bfeat__slide, .bfeat__img img, .bfeat__slide.is-active .bfeat__body > * { transition: none; animation: none; transform: none; }
}

/* Store navigation bar */
.snav { margin: 0 0 30px; }
.snav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.snav ul::-webkit-scrollbar { display: none; }
.snav__main a { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); color: var(--ls-ink); font-weight: 700; font-size: 15px; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s; }
.snav__main a:hover { border-color: var(--ls-ink); }
.snav__main a.is-on { background: var(--ls-dark); border-color: var(--ls-dark); color: #fff; }
.snav__main a.snav__offers { color: var(--ls-accent); border-color: rgba(237, 41, 38, .4); }
.snav__main a.snav__offers.is-on { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; }
.snav__sub { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px dashed var(--ls-line) !important; }
.snav__sub a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ls-surface); border: 1px solid var(--ls-line); color: var(--ls-text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.snav__sub a b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ls-bg); font-size: 12px; }
.snav__sub a.is-on, .snav__sub a:hover { border-color: var(--ls-accent); color: var(--ls-accent); }
.woo .woocommerce-result-count { margin: 0 0 22px !important; color: var(--ls-text); font-size: 14px; }
.woo .woocommerce-ordering { margin: 0 0 22px !important; }
/* Grids: a short last row sits at the start of the row (beside the cards, not in the middle) */
.woo ul.products { display: flex !important; flex-wrap: wrap; justify-content: flex-start; }
.woo ul.products li.product { flex: 0 0 calc((100% - 3 * 22px) / 4); max-width: calc((100% - 3 * 22px) / 4); }
.woo ul.products::before, .woo ul.products::after { display: none !important; }
/* Pagination: equal round buttons */
.woocommerce nav.woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex !important; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li { float: none !important; border: 0 !important; overflow: visible !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid !important; place-items: center; width: 48px !important; height: 48px !important; min-width: 0 !important; padding: 0 !important; border: 1px solid var(--ls-line) !important; border-radius: 50% !important; background: var(--ls-surface) !important; color: var(--ls-ink) !important; font: 700 16px/1 var(--ls-font-display) !important; transition: background-color .25s, color .25s, border-color .25s; }
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--ls-ink) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ls-dark) !important; border-color: var(--ls-dark) !important; color: #fff !important; }
@media (max-width: 1199px) {
	.woo ul.products li.product { flex-basis: calc((100% - 2 * 22px) / 3); max-width: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 767px) {
	.woo ul.products li.product { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); }
	.snav__main a { height: 42px; padding: 0 16px; font-size: 14px; }
}

/* Page header buttons: one family — the red quote button + lighter twins for WhatsApp and Star AI */
.phero__actions { gap: 12px; }
.phero__actions .quote-btn { height: 48px; padding-inline: 20px 18px; font-size: 14.5px; gap: 10px; }
button.quote-btn { border: 0; cursor: pointer; }
.quote-btn--ghost { background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) right / 0 100% no-repeat, rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
[dir="ltr"] .quote-btn--ghost { background-position: left; }
.quote-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.quote-btn--ghost i { color: #fff; }
.quote-btn--wa i { color: #25d366; }
.quote-btn--wa:hover i { color: #25d366; transform: scale(1.12); }
.quote-btn--ai i .lsai-star { width: 12px; height: 12px; }
.quote-btn--ai:hover i { transform: rotate(45deg) scale(1.15); }

/* Language switcher: a round chip beside the cart (header) and a text link in the mobile drawer */
.lang-switch { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; font: 700 13px/1 var(--ls-font-display); letter-spacing: .04em; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; }
.lang-switch:hover { background: #fff; border-color: #fff; color: var(--ls-ink); }
.lang-switch[lang="ar"] { font: 700 17px/1 "Tajawal", sans-serif; letter-spacing: 0; padding-bottom: 3px; }
.lang-switch__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-switch--nav { display: none; }
@media (max-width: 600px) { .site-header__actions > .lang-switch { display: none; } }
@media (max-width: 1199px) {
	.lang-switch--nav { display: inline-flex; width: auto; height: auto; padding: 10px 18px; border-radius: 999px; border-color: rgba(255, 255, 255, .25); font-size: 14px; }
	.lang-switch--nav .lang-switch__long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
	.lang-switch--nav .lang-switch__short { display: none; }
}

/* English (LTR) adjustments — the design is authored right-to-left */
[dir="ltr"] .fab-step small { text-align: left; }
[dir="ltr"] .nav__list > li > a { white-space: nowrap; }
[dir="ltr"] .ls-form--dark select { background-position: calc(100% - 27px) 50%, calc(100% - 22px) 50%; }
[dir="ltr"] .lsai__send svg { transform: scaleX(-1); }
/* LTR drawer: slides in from the right, next to the burger (the RTL rule anchors it at inline-start) */
@media (max-width: 1199px) {
	[dir="ltr"] .nav { inset-inline-start: auto; right: 0; }
}
/* Language link in the mobile drawer: one compact pill with the full language name */
.nav__foot .lang-switch--nav { align-self: flex-start; display: inline-flex; width: auto; height: auto; min-height: 40px; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 14px; }
.nav__foot .lang-switch--nav .lang-switch__long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.nav__foot .lang-switch--nav .lang-switch__short { display: none !important; }

/* Background art (Antra-style): a faint Light Star technical drawing in the top corner of a section and
   two slanted brand strokes that drift with the scroll. Content always sits above it. */
.has-bp { position: relative; overflow-x: clip; }
.has-bp > :not(.bp):not(.bp-strokes) { position: relative; z-index: 1; }
.bp { position: absolute; top: 34px; inset-inline-end: -48px; z-index: 0; width: min(640px, 46vw); color: var(--ls-ink); opacity: .075; pointer-events: none; }
.bp svg { display: block; width: 100%; height: auto; }
.bp-strokes { position: absolute; top: 96px; inset-inline-end: 7%; z-index: 0; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.bp-strokes i { display: block; width: 26px; height: 26px; background: var(--ls-accent); opacity: .85; }
.bp-strokes i:first-child { clip-path: polygon(100% 100%, 20% 73%, 0 73%, 80% 100%); }
.bp-strokes i:last-child { clip-path: polygon(100% 100%, 73% 20%, 73% 0, 100% 80%); }
@media (max-width: 767px) {
	.bp { top: 12px; inset-inline-end: -30px; width: 92vw; opacity: .055; }
	.bp-strokes { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bp, .bp-strokes { transform: none !important; } }

/* ---------- Home: LIGHT STAR INTELLIGENCE, story v2 — the visitor's journey with Star AI ----------
   ASK → COMPARE → PREPARE → CONNECT. Scoped to .lsai-home--journey / .lsj. The markup is the finished
   state; .is-js (added by ai.js) hides what has not happened yet. Story v1 styles (.fab-*) stay above. */
.lsj-steps { margin: 28px 0 30px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); }
.lsj-step { position: relative; display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 15px 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); background: none; color: inherit; text-align: start; cursor: pointer; }
.lsj-step::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 0; height: 1px; background: var(--ls-accent); transition: width .9s var(--ls-ease); }
.lsj-step.is-on::before { width: 100%; }
.lsj-step__num { min-width: 24px; padding-top: 2px; font: 700 13px/1 "Golos Text", system-ui, sans-serif; color: rgba(255, 255, 255, .32); transition: color .4s; }
.lsj-step.is-on .lsj-step__num { color: var(--ls-accent); }
.lsj-step__txt { flex: 1; min-width: 0; }
.lsj-step__txt small { display: block; font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .18em; color: rgba(255, 255, 255, .4); }
.lsj-step__txt b { display: block; margin-top: 6px; font-size: 17px; color: rgba(255, 255, 255, .72); transition: color .4s; }
.lsj-step.is-on b, .lsj-step:hover b { color: #fff; }
.lsj-step__txt > span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .6); transition: max-height .6s var(--ls-ease), opacity .5s, margin .5s; }
.lsj-step.is-on .lsj-step__txt > span { max-height: 72px; margin-top: 4px; opacity: 1; }
.lsj-step__tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: transparent; transition: border-color .4s, color .4s; }
.lsj-step.is-done .lsj-step__tick { border-color: rgba(237, 41, 38, .55); color: var(--ls-accent); }
.lsj-replay { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; opacity: 0; pointer-events: none; transition: opacity .4s, color .25s; }
.lsj-replay:hover { color: #fff; }
.lsai-home--journey:has(.lsj.is-done) .lsj-replay { opacity: 1; pointer-events: auto; }

/* stage: Star AI sits on the edge of the window */
.lsj { position: relative; width: min(640px, 100%); margin-inline: auto; padding-top: 66px; --dir: 1; }
.lsj-bot { position: absolute; top: 0; inset-inline-start: 26px; z-index: 3; width: 86px; cursor: pointer; animation: lsj-float 5s ease-in-out infinite; }
.lsj-bot .bot { display: block; width: 100%; height: auto; overflow: visible; }
.lsj-bot .bot-jet { display: none; }
.lsj-bot :is(.bot-head, .bot-visor, .bot-eyes, .bot-star) { transform-box: view-box; transform-origin: 60px 62px; transition: transform .8s var(--ls-ease); }
.lsj-bot .bot-blink { transform-box: view-box; transition: transform .8s var(--ls-ease); }
.lsj-bot .bot-armL { transform-box: view-box; transform-origin: 32.5px 72px; transition: transform .8s var(--ls-ease); }
.lsj-bot .bot-arm { transform-box: view-box; transform-origin: 87.5px 72px; transition: transform .8s var(--ls-ease); }
.lsj.is-look .lsj-bot :is(.bot-head, .bot-visor, .bot-eyes, .bot-star) { transform: rotate(calc(-7deg * var(--dir))); }
.lsj.is-look .lsj-bot .bot-blink { transform: translate(calc(-2.5px * var(--dir)), 1.5px); }
.lsj.is-point .lsj-bot :is(.bot-head, .bot-visor, .bot-eyes, .bot-star) { transform: rotate(calc(-4deg * var(--dir))); }
.lsj.is-point .lsj-bot .bot-armL { transform: rotate(62deg); }
.lsj.is-follow .lsj-bot :is(.bot-head, .bot-visor, .bot-eyes, .bot-star) { transform: rotate(calc(-11deg * var(--dir))); }
.lsj.is-follow .lsj-bot .bot-blink { transform: translate(calc(-3px * var(--dir)), 2.5px); }
.lsj.is-nod .lsj-bot :is(.bot-head, .bot-visor, .bot-eyes, .bot-star) { animation: lsj-nod 1.5s var(--ls-ease) .2s both; }
.lsj-win { position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.lsj-win__bar { display: flex; align-items: center; gap: 9px; padding: 14px 20px; padding-inline-start: 128px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lsj-win__bar i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgba(61, 220, 132, .7); }
.lsj-win__bar b { font: 700 14px/1 "Golos Text", system-ui, sans-serif; color: #fff; }
.lsj-win__step { margin-inline-start: auto; font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .18em; color: var(--ls-accent); }
.lsj-body { position: relative; display: flex; gap: 18px; padding: 18px 20px 20px; }

/* the conversation */
.lsj-chat { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; max-width: 100%; transition: max-width .9s var(--ls-ease); }
.lsj-chat > * { flex: none; }
.lsj-msg { max-width: 88%; }
.lsj-msg p { margin: 0; padding: 10px 14px; font-size: 14.5px; line-height: 1.7; }
.lsj-msg--ai { align-self: flex-start; }
.lsj-msg--ai p { border-inline-start: 2px solid var(--ls-accent); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88); }
.lsj-msg--me { align-self: flex-end; }
.lsj-msg--me p { background: #fff; color: var(--ls-ink); font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.lsj-msg mark { padding: 0 2px; border-radius: 3px; background: transparent; color: inherit; transition: background-color .45s, box-shadow .45s; }
.lsj-msg mark.is-lit { background: rgba(237, 41, 38, .13); box-shadow: inset 0 -2px 0 var(--ls-accent); }
.lsj-msg.is-think p { font-size: 0; line-height: 0; padding: 15px 16px; }
.lsj-msg.is-think p::after { content: ""; display: block; width: 36px; height: 8px; background: radial-gradient(circle 3px, rgba(255, 255, 255, .8) 96%, transparent) 0 50% / 12px 8px repeat-x; animation: lsj-dots 1s steps(3) infinite; }
.lsj-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.lsj-chip { padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .8); transition: background-color .35s, border-color .35s, color .35s, box-shadow .45s; }
.lsj-chip.is-picked { border-color: var(--ls-accent); background: var(--ls-accent); color: #fff; animation: lsj-press .4s var(--ls-ease); }
.lsj-chip.is-picked.is-lit { box-shadow: 0 0 0 3px rgba(237, 41, 38, .28); }
.lsj-card { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(6, 13, 26, .55); }
.lsj-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.lsj-card__head small { font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.lsj-card__head b { font: 700 11px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .16em; color: #fff; }
.lsj-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.lsj-card__row > span { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: #fff; }
.lsj-card__row p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.lsj-card__row p b { display: block; font-size: 11px; color: var(--ls-accent); }
.lsj-card__row p + p b { color: rgba(255, 255, 255, .55); }
.lsj-card__foot { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.lsj-cap { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.lsj-cap::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ls-accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* the project sheet: a document, not a dashboard */
.lsj-sheet { display: flex; flex-direction: column; padding: 16px 16px 14px; background: #fff; color: var(--ls-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.lsj-sheet__head small { display: block; font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .2em; color: var(--ls-accent); }
.lsj-sheet__head b { display: block; margin-top: 5px; font-size: 17px; }
.lsj-sheet__list { margin: 8px 0 12px; }
.lsj-f { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ls-line); font-size: 13.5px; }
.lsj-f dt { display: flex; flex: 1; gap: 8px; min-width: 0; color: var(--ls-text); white-space: nowrap; }
.lsj-f dt::after { content: ""; flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(10, 21, 39, .28); transform: translateY(-4px); }
.lsj-f dd { display: flex; align-items: center; gap: 6px; max-width: 72%; margin: 0; font-weight: 700; text-align: end; transition: opacity .4s; }
.lsj-f dd svg { flex: none; color: var(--ls-accent); }
.lsj.is-js .lsj-f:not(.is-in) dd { opacity: 0; }
.lsj.is-js .lsj-f.is-in { animation: lsj-fill 1s ease-out; }
.lsj.is-js .lsj-f.is-in dd svg { animation: lsj-tick .5s var(--ls-ease) .1s both; }
.lsj-ready { display: grid; gap: 2px; align-self: flex-start; margin-top: auto; padding: 6px 12px; border: 2px solid var(--ls-accent); color: var(--ls-accent); transform: rotate(-3deg); }
.lsj-ready b { font: 800 15px/1.1 "Golos Text", system-ui, sans-serif; letter-spacing: .12em; }
.lsj-ready span { font: 700 12px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .08em; color: var(--ls-ink); }
.lsj-ready small { font-size: 10.5px; color: var(--ls-text); }
.lsj.is-js:not(.is-ready) .lsj-ready { opacity: 0; }
.lsj.is-js.is-ready .lsj-ready { animation: lsj-stamp .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.lsj-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lsj-cta small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.lsj-token { position: absolute; z-index: 5; padding: 5px 11px; border-radius: 999px; background: var(--ls-accent); box-shadow: 0 10px 24px rgba(237, 41, 38, .35); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); }

/* played by ai.js: fixed window, the chat scrolls itself, the sheet slides in at PREPARE */
.lsj.is-js .lsj-body { height: 450px; }
.lsj.is-js .lsj-chat { -webkit-mask-image: linear-gradient(transparent 0, #000 22px); overflow: hidden; padding-top: 16px; padding-bottom: 4px; mask-image: linear-gradient(transparent 0, #000 22px); }
.lsj.is-js [data-s]:not(.is-in) { display: none; }
.lsj.is-js [data-s].is-in { animation: lsj-in .55s var(--ls-ease) both; }
.lsj.is-js .lsj-msg.is-typing.is-in { animation: lsj-type-rtl 1s steps(20, end) both; }
.lsj.is-js .lsj-card.is-in .lsj-card__row { animation: lsj-in .5s var(--ls-ease) both; }
.lsj.is-js .lsj-card.is-in .lsj-card__row:nth-child(3) { animation-delay: .18s; }
.lsj.is-js .lsj-card.is-in .lsj-card__foot { animation: lsj-in .5s var(--ls-ease) .36s both; }
.lsj.is-js .lsj-sheet { position: absolute; top: 18px; bottom: 20px; inset-inline-end: 20px; width: calc(50% - 29px); opacity: 0; visibility: hidden; transform: translateX(calc(-28px * var(--dir))); transition: opacity .6s, transform .9s var(--ls-ease), visibility 0s .9s; }
.lsj.is-js.is-prepare .lsj-sheet { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.lsj.is-js.is-prepare .lsj-chat { max-width: calc(50% - 9px); }
/* not played (no JavaScript, reduced motion): everything side by side at once */
.lsj:not(.is-js) .lsj-body { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }

@keyframes lsj-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes lsj-type-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes lsj-type-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes lsj-dots { from { width: 10px; } to { width: 36px; } }
@keyframes lsj-press { 50% { transform: scale(.93); } }
@keyframes lsj-fill { from { background-color: rgba(237, 41, 38, .1); } }
@keyframes lsj-tick { from { transform: scale(0); } }
@keyframes lsj-stamp { from { opacity: 0; transform: rotate(-3deg) scale(1.6); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes lsj-float { 50% { transform: translateY(-5px); } }
@keyframes lsj-nod { 20%, 60% { transform: translateY(2.5px); } 40%, 80% { transform: none; } }

@media (max-width: 767px) {
	.lsj-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-top: 0; }
	.lsj-step { flex-direction: column; gap: 6px; padding: 10px 2px; border-bottom-width: 2px; }
	.lsj-step::before { bottom: -2px; height: 2px; }
	.lsj-step__txt small, .lsj-step__txt > span, .lsj-step__tick { display: none; }
	.lsj-step__txt b { margin-top: 0; font-size: 13.5px; }
	.lsj { padding-top: 56px; }
	.lsj-bot { inset-inline-start: 16px; width: 72px; }
	.lsj-win__bar { padding-inline-start: 104px; }
	.lsj-body, .lsj:not(.is-js) .lsj-body { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
	.lsj.is-js .lsj-body { height: auto; }
	.lsj.is-js .lsj-chat { height: 340px; }
	.lsj.is-js.is-prepare .lsj-chat { max-width: none; }
	.lsj.is-js .lsj-sheet { position: static; display: none; width: auto; transform: none; }
	.lsj.is-js.is-prepare .lsj-sheet { display: flex; }
	.lsj-msg p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.lsj *, .lsj-bot { animation: none !important; transition: none !important; }
}
[dir="ltr"] .lsj { --dir: -1; }
[dir="ltr"] .lsj.is-js .lsj-msg.is-typing.is-in { animation-name: lsj-type-ltr; }
[dir="ltr"] .lsj.is-point .lsj-bot .bot-armL { transform: none; }
[dir="ltr"] .lsj.is-point .lsj-bot .bot-arm { transform: rotate(-62deg); }

/* ---------- Home: LIGHT STAR INTELLIGENCE, story v3 — FROM IDEA TO REALITY (.lsr) ----------
   Desktop (.is-pin): one pinned scene driven by scroll (reality.js). Otherwise: a vertical story, one
   panel per stage. --done / --after are set by the script from the scroll position. */
.lsr { position: relative; background: radial-gradient(ellipse 70% 60% at 62% 45%, #13264a 0%, #0a1527 55%, #060d1a 100%); color: rgba(255, 255, 255, .78); --dir: 1; --done: 0; --after: 0; }
.lsr__in { position: relative; padding-block: 90px; }
.lsr__name { margin: 0; font: 700 12px/1.4 "Golos Text", system-ui, sans-serif; letter-spacing: .2em; color: rgba(255, 255, 255, .55); }
.lsr-rail, .lsr-rail__bar, .lsr__stage, .lsr-skip { display: none; }
.lsr-step__n { display: flex; gap: 10px; font: 700 11px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .18em; color: var(--ls-accent); }
.lsr-step__title { margin: 16px 0 14px; font-size: clamp(32px, 3.6vw, 56px); font-weight: 700; line-height: 1.2; color: #fff; }
.lsr-step__title em { font-style: normal; color: var(--ls-accent); }
.lsr-step__line { max-width: 440px; margin: 0; font-size: 16.5px; line-height: 1.8; }
.lsr-step__note { display: inline-block; margin: 18px 0 0; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; color: rgba(255, 255, 255, .55); }
.lsr-care { margin-top: 26px; }
.lsr-care__now { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.lsr-care__now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgba(61, 220, 132, .7); }
.lsr-care__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lsr-chip { padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #fff; font-size: 14px; text-decoration: none; transition: background-color .3s, border-color .3s; }
.lsr-chip:hover { border-color: var(--ls-accent); background: var(--ls-accent); color: #fff; }
.lsr-care__soon { margin: 0 0 18px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

/* the scene: a light "desk / studio" inside the dark section */
.lsr-scene, .lsr-mini { position: relative; overflow: hidden; aspect-ratio: 1000 / 640; background: radial-gradient(ellipse at 50% 40%, #f4f2ed, #d8d3c9); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.lsr-svg, .lsr-mini > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lsr-photo { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, 0 0); }
.lsr-photo img, .lsr-mini--real img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.14)); }
.lsr-shade { position: absolute; inset: 0; background: rgba(6, 13, 26, .62); opacity: var(--after); pointer-events: none; }
.lsr-trail { position: absolute; inset-inline-end: 18px; bottom: 18px; display: flex; gap: 8px; opacity: calc(var(--done) - var(--after)); transform: translateY(calc((1 - var(--done)) * 24px)); }
.lsr-trail__i { width: 96px; margin: 0; padding: 4px; background: #fdfcf8; box-shadow: 0 10px 22px rgba(0, 0, 0, .28); }
.lsr-trail__i:nth-child(odd) { transform: rotate(-2deg); }
.lsr-trail__i:nth-child(even) { transform: rotate(1.5deg); }
.lsr-trail__i svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; }
.lsr-trail__i--real { background-size: cover; background-position: center; }
.lsr-trail__i--real::before { content: ""; display: block; aspect-ratio: 1000 / 640; }
.lsr-trail__i figcaption { padding-top: 4px; font: 700 9px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .14em; color: var(--ls-ink); }
.lsr-trail__i--real figcaption { background: #fdfcf8; margin: 0 -4px -4px; padding: 4px; }
.lsr-stamp { position: absolute; top: 22px; inset-inline-start: 22px; display: grid; gap: 3px; padding: 9px 15px; border: 2px solid #fff; background: rgba(237, 41, 38, .92); color: #fff; opacity: calc(var(--done) - var(--after)); transform: rotate(-3deg) scale(calc(1.3 - .3 * var(--done))); }
.lsr-stamp b { font: 800 14px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .14em; }
.lsr-stamp span { font-size: 13px; font-weight: 700; }

/* Star AI: look → confirm → step aside → come forward for after-sales */
.lsr-bot { position: absolute; bottom: -30px; inset-inline-start: -120px; z-index: 4; width: 200px; transition: transform 1.1s var(--ls-ease), opacity .6s; }
.lsr-bot__poses { display: grid; animation: lsr-float 6s ease-in-out infinite; }
.lsr-bot__poses img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .6s; }
.lsr-bot__poses img.is-on { opacity: 1; }
.lsr[data-stage="0"] .lsr-bot { transform: rotate(calc(-5deg * var(--dir))); }
.lsr[data-stage="1"] .lsr-bot { animation: lsr-nod 1.3s var(--ls-ease) .3s both; }
.lsr[data-stage="2"] .lsr-bot, .lsr[data-stage="3"] .lsr-bot, .lsr[data-stage="4"] .lsr-bot { opacity: .5; transform: translate(calc(46px * var(--dir)), 26px) scale(.7); }
.lsr[data-stage="5"] .lsr-bot { transform: translate(calc(-150px * var(--dir)), -60px) scale(1.3); }
.lsr-bot__say { position: absolute; bottom: 100%; inset-inline-start: 46%; width: 250px; margin: 0 0 6px; padding: 10px 14px; background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); color: var(--ls-ink); font-size: 14px; line-height: 1.6; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ls-ease); pointer-events: none; }
.lsr-bot__say--1 { display: flex; flex-wrap: wrap; gap: 6px; width: 270px; }
.lsr-bot__say--1 span { padding: 3px 9px; border: 1px solid rgba(237, 41, 38, .45); color: var(--ls-accent); font-size: 12.5px; font-weight: 700; }
.lsr[data-stage="0"] .lsr-bot__say--0, .lsr[data-stage="1"] .lsr-bot__say--1 { opacity: 1; transform: none; }

/* desktop: pinned while the story plays */
.lsr.is-pin { height: 640vh; }
.lsr.is-pin .lsr__pin { position: sticky; top: 0; height: calc(100vh * var(--z)); overflow: hidden; }
.lsr.is-pin .lsr__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: auto minmax(0, 1fr); gap: 26px clamp(40px, 5vw, 96px); height: 100%; padding-block: calc(var(--ls-header-h) + 4px) 34px; }
.lsr.is-pin .lsr__head { grid-column: 1 / -1; }
.lsr.is-pin .lsr-rail { display: flex; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.lsr.is-pin .lsr-rail li { flex: 1; }
.lsr-rail button { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 0 0 10px; border: 0; background: none; color: rgba(255, 255, 255, .42); font-size: 13.5px; text-align: start; cursor: pointer; transition: color .4s; }
.lsr-rail button small { font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; letter-spacing: .1em; }
.lsr-rail button.is-done { color: rgba(255, 255, 255, .68); }
.lsr-rail button.is-on, .lsr-rail button:hover { color: #fff; }
.lsr.is-pin .lsr-rail__bar { display: block; height: 1px; background: rgba(255, 255, 255, .14); }
.lsr-rail__bar i { display: block; height: 100%; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; }
.lsr.is-pin .lsr__copy { display: grid; align-items: center; }
.lsr.is-pin .lsr-step { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .8s var(--ls-ease); pointer-events: none; }
.lsr.is-pin .lsr-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lsr.is-pin .lsr-mini { display: none; }
.lsr.is-pin .lsr__stage { position: relative; display: block; align-self: center; justify-self: center; width: 100%; max-width: calc((100vh * var(--z) - var(--ls-header-h) - 170px) * 1.5625); }
.lsr.is-pin .lsr-skip { position: absolute; bottom: 26px; inset-inline-end: var(--ls-gutter); display: inline-flex; gap: 6px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .7); font-size: 13px; transition: opacity .4s, border-color .3s; }
.lsr-skip:hover { border-color: var(--ls-accent); color: #fff; }
.lsr[data-stage="5"] .lsr-skip { opacity: 0; pointer-events: none; }
body.lsr-on .lsai-dock, body.lsr-on .lsai-mini, body.lsr-on .lsai-bot__x { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* phones, tablets, reduced motion: one panel per stage */
.lsr:not(.is-pin) .lsr__copy { display: grid; gap: 72px; margin-top: 34px; }
.lsr-mini { margin-top: 24px; }
.lsr-mini--real img { transform: none; clip-path: circle(0% at 42% 62%); transition: clip-path 1.8s var(--ls-ease); }
.lsr-mini--real.is-in img, .lsr:not(.is-js) .lsr-mini--real img { clip-path: circle(85% at 42% 62%); }
.lsr-mini--done .lsr-trail { inset: 0; align-items: center; justify-content: center; opacity: 1; transform: none; }
.lsr-mini--done .lsr-stamp { opacity: 1; transform: rotate(-3deg); }
.lsr-mini--after { aspect-ratio: auto; background: none; clip-path: none; }
.lsr-mini__bot { display: block; width: 200px; height: auto; margin-inline-start: auto; }

@keyframes lsr-float { 50% { transform: translateY(-7px); } }
@keyframes lsr-nod { 25%, 65% { transform: translateY(5px) rotate(calc(-2deg * var(--dir))); } 45%, 85% { transform: none; } }
@media (max-width: 767px) {
	.lsr__in { padding-block: 70px; }
	.lsr-step__title { font-size: 32px; }
	.lsr-step__line { font-size: 15.5px; }
	.lsr:not(.is-pin) .lsr__copy { gap: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.lsr *, .lsr-bot { animation: none !important; transition: none !important; }
}
[dir="ltr"] .lsr { --dir: -1; }
[dir="ltr"] .lsr-rail__bar i { transform-origin: left; }

/* Star AI pose renders (inc/ai-robot.php): the figure keeps its frame, the image fits inside it */
.bot--img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lsj-bot .bot--img, .lsr-bot .bot--img, .lsr-mini__bot { height: auto; }

/* ---------- Home: LIGHT STAR INTELLIGENCE, story v4 — «ارسم فكرتك… وشوفها بتتبني» (.lsd) ---------- */
.lsd { position: relative; padding-block: 100px; background: radial-gradient(ellipse 70% 60% at 62% 45%, #13264a 0%, #0a1527 55%, #060d1a 100%); color: rgba(255, 255, 255, .78); }
.lsd__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7.4fr); gap: 50px clamp(36px, 4.5vw, 80px); align-items: center; }
.lsd__title { margin: 18px 0 16px; font-size: clamp(32px, 3.5vw, 54px); font-weight: 700; line-height: 1.2; color: #fff; }
.lsd__title em { font-style: normal; color: var(--ls-accent); }
.lsd__lead { max-width: 460px; margin: 0; font-size: 16px; line-height: 1.8; }
.lsd__note { margin: 18px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.lsd-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: lsd; }
.lsd-steps li { counter-increment: lsd; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .55); transition: color .4s, border-color .4s, background-color .4s; }
.lsd-steps li::before { content: counter(lsd); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .1); font: 700 10.5px/1 "Golos Text", system-ui, sans-serif; }
.lsd-steps li.is-done { color: rgba(255, 255, 255, .8); border-color: rgba(237, 41, 38, .45); }
.lsd-steps li.is-done::before { background: var(--ls-accent); color: #fff; }
.lsd-steps li.is-on { color: #fff; border-color: var(--ls-accent); background: rgba(237, 41, 38, .12); }

/* Star AI: the design partner — talks, suggests, builds */
.lsd-bot { display: flex; align-items: flex-end; gap: 10px; margin-top: 24px; }
.lsd-bot__poses { position: relative; display: grid; flex: none; width: 140px; animation: lsr-float 6s ease-in-out infinite; }
.lsd-bot__poses::after { content: ""; position: absolute; inset: 58% 18% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(rgba(237, 41, 38, .35), transparent 70%); filter: blur(8px); }
.lsd-bot__poses img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .4s; }
.lsd-bot__poses img.is-on { opacity: 1; }
.lsd-bot__say { position: relative; order: 2; flex: 1; max-width: 300px; margin: 0 0 64px; padding: 12px 15px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .32); color: var(--ls-ink); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.lsd-bot__say p { margin: 0; font-size: 14.5px; line-height: 1.65; font-weight: 600; }
.lsd-bot__say.is-pop { animation: lsd-pop .45s var(--ls-ease); }
.lsd-bot__acts:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lsd-act { padding: 6px 12px; border: 1px solid rgba(10, 21, 39, .2); border-radius: 999px; background: none; color: var(--ls-ink); font-size: 13px; font-weight: 700; transition: background-color .25s, color .25s, border-color .25s; }
.lsd-act:hover { border-color: var(--ls-ink); }
.lsd-act--main { border-color: var(--ls-accent); background: var(--ls-accent); color: #fff; }
.lsd-act--main:hover { background: var(--ls-accent-hover); border-color: var(--ls-accent-hover); }
.lsd-fly { position: fixed; z-index: 1000; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(237, 41, 38, .9), 0 0 22px 8px rgba(237, 41, 38, .6); pointer-events: none; }
@keyframes lsd-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* the board: a drafting table */
.lsd-board { position: relative; background: #e9e5de; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.lsd-tools { position: absolute; top: 12px; inset-inline: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 14px; background: rgba(10, 21, 39, .9); box-shadow: 0 10px 26px rgba(10, 21, 39, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lsd-tools::-webkit-scrollbar { display: none; }
.lsd-tool { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .7); font-size: 12.5px; white-space: nowrap; transition: background-color .25s, color .25s; }
.lsd-tool:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lsd-tool.is-on { background: var(--ls-accent); color: #fff; }
.lsd-tool:disabled { opacity: .3; pointer-events: none; }
.lsd-tool--icon { padding: 7px; }
.lsd-tools__sep { flex: none; width: 1px; height: 22px; margin-inline: 4px; background: rgba(255, 255, 255, .15); }
.lsd-svg { display: block; width: 100%; height: auto; padding-top: 44px; touch-action: none; cursor: crosshair; user-select: none; }
.lsd[data-tool="move"] .lsd-svg { cursor: move; }
.lsd[data-tool="erase"] .lsd-svg { cursor: not-allowed; }
.lsd.is-3d .lsd-svg { cursor: grab; }
.lsd.is-3d .lsd-svg:active { cursor: grabbing; }
.lsd.is-3d .lsd-tools { opacity: 0; pointer-events: none; }
.lsd-paper { fill: #fdfcf8; }
.lsd-tick { stroke: #7d8a9c; stroke-width: 1; }
.lsd-rt { font: 600 11px/1 "Golos Text", sans-serif; fill: #7d8a9c; text-anchor: middle; }
.lsd-pencil { fill: none; stroke: #2e3a4f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lsd-shape { fill: rgba(10, 21, 39, .05); stroke: #0a1527; stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.lsd-shape.is-morph { stroke: color-mix(in srgb, #2e3a4f, #ed2926 calc((1 - var(--m)) * 60%)); fill: none; }
.lsd-shape.is-ghost { stroke: #ed2926; stroke-dasharray: 6 5; fill: rgba(237, 41, 38, .06); }
.lsd-shape.is-sel { stroke: #ed2926; stroke-width: 2.4; }
.lsd-shape.is-hover { fill: rgba(237, 41, 38, .12); }
.lsd[data-tool="erase"] .lsd-shape.is-hover { stroke: #ed2926; }
.lsd-shape.is-pop { animation: lsd-land .5s var(--ls-ease); transform-box: fill-box; transform-origin: center; }
@keyframes lsd-land { from { opacity: 0; transform: scale(.9); } }
.lsd-shape--wall { fill: none; stroke-width: 9; stroke-linecap: square; }
.lsd-shape--wall.is-morph { stroke-width: calc(2.4px + var(--m) * 6.6px); stroke-linecap: round; }
.lsd-shape--wall.is-ghost { stroke-width: 9; fill: none; }
.lsd-shape--run { fill: rgba(10, 21, 39, .08); }
.lsd-shape--island { fill: rgba(237, 41, 38, .05); }
.lsd-shape--sink, .lsd-shape--hob { fill: #fff; stroke-width: 1.4; }
.lsd-shape--fridge { fill: rgba(125, 138, 156, .18); stroke-width: 1.6; }
.lsd-mark { fill: none; stroke: #0a1527; stroke-width: 1.3; }
.lsd-mark--x { stroke-opacity: .35; }
.lsd-handle { fill: #fff; stroke: #ed2926; stroke-width: 2.5; cursor: nwse-resize; }
.lsd-lbl { font: 700 14px/1 "Tajawal", "Golos Text", sans-serif; fill: #0a1527; text-anchor: middle; pointer-events: none; }
.lsd-lbl--wall, .lsd-lbl--small { font-size: 12px; fill: #536074; }
.lsd-live { font: 700 14px/1 "Golos Text", sans-serif; fill: #ed2926; text-anchor: middle; paint-order: stroke; stroke: #fdfcf8; stroke-width: 4px; }
.lsd-dim { pointer-events: none; }
.lsd-dim line { stroke: #ed2926; stroke-width: 1.2; }
.lsd-dim text { font: 700 13px/1 "Golos Text", sans-serif; fill: #ed2926; text-anchor: middle; paint-order: stroke; stroke: #fdfcf8; stroke-width: 4px; }
.lsd-hint, .lsd-drag { position: absolute; inset-inline: 0; bottom: 12px; margin: 0; padding-inline: 20px; text-align: center; font-size: 13px; color: #536074; pointer-events: none; transition: opacity .4s; }
.lsd.has-drawn .lsd-hint, .lsd.is-3d .lsd-hint { opacity: 0; }
.lsd-drag { opacity: 0; }
.lsd.is-3d .lsd-drag { opacity: 1; }

/* under the board */
.lsd-status { min-height: 20px; margin-top: 12px; font: 600 13px/1.5 "Golos Text", "Tajawal", sans-serif; color: rgba(255, 255, 255, .6); }
.lsd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lsd-bar--3d, .lsd.is-3d .lsd-bar--draw { display: none; }
.lsd.is-3d .lsd-bar--3d { display: flex; }
.lsd-tpl, .lsd-mats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lsd-tpl small { margin-inline-end: 4px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.lsd-btn, .lsd-chip { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); font-size: 13.5px; transition: border-color .3s, background-color .3s, color .3s; }
.lsd-btn:hover, .lsd-chip:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.lsd-chip.is-on { border-color: var(--ls-accent); background: var(--ls-accent); color: #fff; }
.lsd-go { order: -1; margin-inline-end: auto; }
.lsd-go:disabled { opacity: .4; pointer-events: none; }

@media (max-width: 1199px) { .lsd-tool span { display: none; } .lsd-tool { padding: 8px; } }
@media (max-width: 991px) { .lsd__in { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
	.lsd { padding-block: 70px; }
	.lsd__title { font-size: 32px; }
	.lsd-bot__poses { width: 104px; }
	.lsd-bot__say { margin-bottom: 44px; }
	.lsd-bot__say p { font-size: 14px; }
	.lsd-tools { top: 8px; inset-inline: 8px; }
	.lsd-svg { padding-top: 50px; }
	.lsd-go { width: 100%; margin-inline-end: 0; }
}
/* showcase: Star AI designs, the tools stay out of the way */
.lsd.is-show .lsd-tools, .lsd.is-show .lsd-bar, .lsd.is-show .lsd-bar--3d, .lsd.is-show .lsd-status, .lsd.is-show .lsd-hint { display: none; }
.lsd.is-show .lsd-svg { padding-top: 0; cursor: default; }
.lsd.is-show.is-3d .lsd-svg { cursor: grab; }
/* appliances menu */
.lsd-menu { position: relative; flex: none; }
.lsd-menu__ico { display: inline-flex; }
.lsd-menu__chev { margin-inline-start: -2px; opacity: .7; }
.lsd-menu__list { position: fixed; z-index: 1300; display: grid; min-width: 150px; margin-top: 6px; padding: 5px; border-radius: 12px; background: #0a1527; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.lsd-menu__list[hidden] { display: none; }
.lsd-menu__item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .8); font-size: 13.5px; text-align: start; }
.lsd-menu__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lsd-menu__item.is-on { background: var(--ls-accent); color: #fff; }
/* the studio: full screen */
.lsd-close { display: none; }
.lsd.is-studio .lsd__in { position: fixed; inset: 0; z-index: 1200; max-width: none; width: auto; margin: 0; padding: 22px clamp(16px, 3vw, 44px); grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); align-items: center; overflow-y: auto; background: radial-gradient(ellipse 70% 60% at 62% 45%, #13264a 0%, #0a1527 55%, #060d1a 100%); animation: lsd-open .45s var(--ls-ease); }
@keyframes lsd-open { from { opacity: 0; transform: scale(.98); } }
.lsd.is-studio .lsd__lead, .lsd.is-studio .lsd__note { display: none; }
.lsd.is-studio .lsd__title { margin-top: 12px; font-size: 26px; }
.lsd.is-studio .lsd-bot { flex-direction: column-reverse; align-items: flex-start; }
.lsd.is-studio .lsd-bot__say { order: 0; max-width: none; margin: 0; }
.lsd.is-studio .lsd-board { width: min(100%, calc((100vh * var(--z) - 210px) * 1.2)); margin-inline: auto; }
.lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: min(100%, calc((100vh * var(--z) - 210px) * 1.2)); margin-inline: auto; }
.lsd.is-studio .lsd-close { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 1210; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; transition: background-color .25s, border-color .25s; }
.lsd.is-studio .lsd-close:hover { border-color: var(--ls-accent); background: var(--ls-accent); }
@media (max-width: 991px) {
	.lsd.is-studio .lsd__in { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 70px; }
	.lsd.is-studio .lsd__work { order: -1; }
	.lsd.is-studio .lsd__copy > :not(.lsd-bot) { display: none; }
	.lsd.is-studio .lsd-bot { flex-direction: row; align-items: flex-end; margin: 0; }
	.lsd.is-studio .lsd-bot__poses { width: 72px; }
	.lsd.is-studio .lsd-bot__say { flex: 1; }
	.lsd.is-studio .lsd-board, .lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: 100%; }
}
/* Star AI walking on the board while it builds */
.lsd-walker { position: absolute; top: 0; left: 0; z-index: 3; display: grid; width: 70px; opacity: 0; pointer-events: none; transform: translate(-50%, -88%); transition: left var(--d, .65s) cubic-bezier(.45, 0, .2, 1), top var(--d, .65s) cubic-bezier(.45, 0, .2, 1), opacity .35s; }
.lsd-walker::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 10px; border-radius: 50%; background: radial-gradient(rgba(237, 41, 38, .55), transparent 70%); }
.lsd-walker.is-on { opacity: 1; }
.lsd-walker img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity .25s; }
.lsd-walker img.is-on { opacity: 1; }
.lsd-walker.is-walking img { animation: lsd-hover .32s ease-in-out infinite alternate; }
@keyframes lsd-hover { to { transform: translateY(-5px) rotate(-2deg); } }
.lsd.is-3d .lsd-walker { opacity: 0; }
/* plan details: cabinet modules and wall cabinets */
.lsd-mod { stroke: #0a1527; stroke-opacity: .28; stroke-width: 1; }
.lsd-upper { fill: none; stroke: #0a1527; stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 6 5; }
/* quick edit bar */
.lsd-pop { position: absolute; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: #0a1527; box-shadow: 0 12px 28px rgba(10, 21, 39, .35); animation: lsd-pop .3s var(--ls-ease); }
.lsd-pop[hidden] { display: none; }
.lsd-pop button { display: inline-flex; align-items: center; gap: 5px; min-width: 34px; height: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: none; color: #fff; font-size: 13px; justify-content: center; }
.lsd-pop button:hover { background: rgba(255, 255, 255, .1); }
.lsd-pop button[data-pop="longer"], .lsd-pop button[data-pop="shorter"] { font: 700 18px/1 "Golos Text", sans-serif; }
.lsd-pop button[data-pop="del"]:hover { background: var(--ls-accent); }
.lsd-pop button[hidden], .lsd-pop span[hidden] { display: none; }
.lsd-pop__size { min-width: 58px; padding: 0 4px; text-align: center; font: 700 12.5px/1 "Golos Text", sans-serif; color: rgba(255, 255, 255, .8); }
/* real 3D layer */
.lsd-gl { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .7s; }
.lsd-gl canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.lsd.is-3d.is-gl .lsd-gl { opacity: 1; pointer-events: auto; }
.lsd-drag { z-index: 2; }
@media (max-width: 767px) { .lsd-walker { width: 52px; } .lsd-pop button span { display: none; } }
@media (prefers-reduced-motion: reduce) { .lsd *, .lsd-bot__poses { animation: none !important; transition: none !important; } }

/* ---------- Desktop scale: the owner preferred the site at 90 %, so that is its natural size on
   screens from 1200 px. Phones and tablets are unchanged. --z undoes the zoom for viewport heights;
   scripts that place things in pixels read the zoom (draw.js). ---------- */
:root { --z: 1; }
@media (min-width: 1200px) {
	html { zoom: .9; }
	:root { --z: 1.1112; }
}

/* WhatsApp always in its own green, so it reads at a glance wherever it appears */
a[href*="wa.me"] svg, a.is-whatsapp svg, a.is-whatsapp:hover svg { color: #25d366; }

/* ---------- Numbers as a tape measure (template-parts/home/stats.php) ----------
   The band pins (sticky) while a giant odometer year rolls 1998 → today, a measuring tape
   slides under a red needle and the four figures light up in turn; then the next section
   slides over it like a curtain. Without JS / with reduced motion: final state, not pinned. */
.lsn {
	--step: 74px;
	position: relative; isolation: isolate; color: rgba(255, 255, 255, .72);
	background:
		radial-gradient(45% 60% at 8% 12%, rgba(237, 41, 38, .18), transparent 70%),
		radial-gradient(40% 55% at 92% 90%, rgba(237, 41, 38, .12), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
		var(--ls-dark);
}
.lsn__pin { position: relative; overflow: hidden; padding-block: clamp(70px, 8vw, 120px); }
.lsn__bg { position: absolute; inset: 0; z-index: -1; opacity: .07; mix-blend-mode: luminosity; }
.lsn__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.lsn__in { display: grid; justify-items: center; gap: clamp(16px, 3.2vh, 38px); text-align: center; }
.lsn__head { display: grid; justify-items: center; }
.lsn__title { margin: 14px 0 0; font-size: clamp(28px, 3.2vw, 46px); color: #fff; }
.lsn__title em { font-style: normal; color: var(--ls-accent); }

/* odometer year */
.lsn__year { display: flex; font: 800 clamp(92px, min(16vw, 27vh), 250px)/1 "Cal Sans", sans-serif; letter-spacing: -.045em; color: #fff; text-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.lsn__reel { display: block; height: 1em; overflow: hidden; }
.lsn__reel:nth-child(n+3) { color: var(--ls-accent); }
.lsn__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); transition: transform .5s var(--ls-ease); will-change: transform; }
.lsn__strip i { display: block; height: 1em; font-style: normal; }

/* measuring tape */
.lsn__tape {
	position: relative; width: 100vw; height: 64px; margin-top: -6px;
	border-block: 1px solid rgba(255, 255, 255, .14);
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.lsn__rule { position: absolute; inset: 0 auto 0 50%; transform: translateX(calc(var(--pos) * var(--step) * -1)); will-change: transform; }
.lsn__tick { position: absolute; top: 0; left: calc(var(--i) * var(--step)); width: 1px; height: 14px; background: rgba(255, 255, 255, .32); }
.lsn__tick::after { content: ""; position: absolute; top: 0; left: calc(var(--step) / 2); width: 1px; height: 8px; background: rgba(255, 255, 255, .18); }
.lsn__tick.is-major { height: 24px; background: rgba(255, 255, 255, .7); }
.lsn__tick b { position: absolute; top: 30px; left: 0; transform: translateX(-50%); font: 600 12px/1 "Golos Text", sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.lsn__tick.is-mark { background: var(--ls-accent); height: 24px; }
.lsn__tick.is-mark b { color: #fff; }
.lsn__needle { position: absolute; left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; background: var(--ls-accent); box-shadow: 0 0 14px rgba(237, 41, 38, .9); }
.lsn__needle::before { content: ""; position: absolute; top: 0; left: 50%; border: 6px solid transparent; border-top-color: var(--ls-accent); transform: translateX(-50%); }

/* the four figures: hairline columns, no boxes */
.lsn__facts { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin: 0; padding: 0; list-style: none; }
.lsn__fact { position: relative; padding: 18px clamp(14px, 2vw, 30px) 0; opacity: .28; transition: opacity .6s; }
.lsn__fact + .lsn__fact { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.lsn__fact::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background: var(--ls-accent); transform: translateX(-50%); transition: width .8s var(--ls-ease); }
.lsn__fact.is-on { opacity: 1; }
.lsn__fact.is-on::before { width: 44px; }
.lsn__num { display: inline-flex; align-items: flex-start; font: 700 clamp(34px, 3.3vw, 54px)/1 "Cal Sans", sans-serif; color: #fff; }
.lsn__num sup { top: 0; margin-inline-start: 2px; font-size: .5em; line-height: 1; color: var(--ls-accent); }
.lsn__fact h3 { margin: 12px 0 6px; font-size: 18px; color: #fff; }
.lsn__fact p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }

/* pinned mode (added by JS) */
.lsn.is-pinned { height: calc(var(--lsn-track, 320) * 1vh * var(--z)); }
.lsn.is-pinned .lsn__pin { position: sticky; top: 0; display: grid; align-items: center; height: calc(100vh * var(--z)); height: calc(100svh * var(--z)); padding-block: calc(var(--ls-header-h) * .7) 24px; }
/* curtain: the next section slides over the pinned band for its last screen */
.lsn.is-pinned + * {
	position: relative; z-index: 2; margin-top: calc(-100vh * var(--z)); margin-top: calc(-100svh * var(--z));
	border-radius: 34px 34px 0 0; box-shadow: 0 -30px 80px rgba(3, 8, 18, .5);
}
:where(.lsn.is-pinned) + * { background-color: var(--ls-bg); }

@media (max-width: 991px) {
	.lsn { --step: 50px; }
	.lsn.is-pinned { --lsn-track: 290; }
	.lsn__facts { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
	.lsn__fact:nth-child(3) { border-inline-start: 0; }
	.lsn__fact h3 { font-size: 16px; margin-top: 8px; }
	.lsn__fact p { font-size: 13px; }
	.lsn.is-pinned + * { border-radius: 24px 24px 0 0; }
}
@media (max-width: 767px) {
	.lsn__year { font-size: clamp(76px, 25vw, 120px); }
	.lsn__tape { height: 54px; }
	.lsn__num { font-size: 32px; }
	.lsn__fact { padding-top: 14px; }
	.lsn.is-pinned .lsn__pin { padding-block: 76px 18px; }
}

/* ---------- Curtain footer: the closing "request a quote" band holds still at the bottom of
   the screen while the footer rises over it (JS adds .has-endcap + --cta-h). ---------- */
.has-endcap .cta-band.is-endcap { position: sticky; top: calc(100vh * var(--z) - var(--cta-h, 0px)); top: calc(100svh * var(--z) - var(--cta-h, 0px)); z-index: 0; }
.has-endcap .ls-endspace { height: var(--cta-h, 0px); }
.ls-endspace { display: block; }
.has-endcap .site-footer { z-index: 1; margin-top: calc(-1 * var(--cta-h, 0px)); border-radius: 34px 34px 0 0; box-shadow: 0 -30px 80px rgba(3, 8, 18, .35); }
@media (max-width: 991px) { .has-endcap .site-footer { border-radius: 24px 24px 0 0; } }

/* ---------- "The window" video band (template-parts/home/video-cta.php) ----------
   Overrides the older .vcta rules: the film sits in a rounded frame that opens to full width as
   the band scrolls in (--open 0 → 1 from main.js; 1 without JS / reduced motion). */
.vcta { --open: 1; display: block; min-height: 0; padding: 0; overflow: visible; background: var(--ls-bg); }
.vcta__frame {
	position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
	min-height: clamp(520px, calc(78vh * var(--z)), 820px); padding-block: clamp(70px, 8vw, 110px);
	clip-path: inset(calc((1 - var(--open)) * 7%) calc((1 - var(--open)) * 9%) round calc((1 - var(--open)) * 40px + 0px));
	will-change: clip-path;
}
/* no extra zoom on the film: it keeps its full sharpness */
.vcta__shade { background: linear-gradient(to top, rgba(6, 13, 26, .82) 0%, rgba(6, 13, 26, .32) 42%, rgba(6, 13, 26, 0) 75%); }
.vcta__copy { display: grid; justify-items: start; gap: 18px; max-width: 640px; }
.vcta__copy .vcta__title { margin: 0; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.12; }
.vcta__copy .vcta__title em { font-style: normal; color: var(--ls-accent); }
.vcta__copy p { max-width: 520px; margin: 0; font-size: 17px; color: rgba(255, 255, 255, .82); }
.vcta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 6px; }
.vcta__watch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 0; border-radius: 99px; background: none; font: 600 15px/1 var(--ls-font-body); color: #fff; cursor: pointer; }
[dir="rtl"] .vcta__watch { padding: 6px 6px 6px 16px; }
.vcta__watch span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s; }
.vcta__watch:hover span { background: var(--ls-accent); }
@media (max-width: 767px) {
	.vcta__frame { min-height: calc(86svh * var(--z)); padding-block: 60px 44px; }
	.vcta__copy p { font-size: 15px; }
	.vcta__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ---------- Studio v2: clear exit, labelled tools, Star AI checklist and board markers ---------- */
.lsd-studio-head, .lsd-check { display: none; }
.lsd.is-studio .lsd-close { width: auto; height: 42px; grid-auto-flow: column; gap: 8px; padding: 0 16px 0 12px; border-radius: 99px; font-size: 14px; font-weight: 700; }
.lsd.is-studio .lsd__copy { align-self: stretch; display: flex; flex-direction: column; gap: 16px; padding-top: 58px; }
.lsd.is-studio .lsd__copy > .eyebrow, .lsd.is-studio .lsd__title, .lsd.is-studio .lsd-steps { display: none; }
.lsd.is-studio .lsd-studio-head { display: grid; gap: 6px; position: fixed; top: 16px; inset-inline-start: clamp(16px, 3vw, 44px); z-index: 1210; max-width: 420px; color: #fff; }
.lsd-studio-head b { font-size: 18px; }
.lsd-studio-head span { font-size: 13px; color: rgba(255, 255, 255, .6); }
/* Star AI: small, beside its message, not a big figure */
.lsd.is-studio .lsd-bot { flex-direction: row; align-items: flex-start; gap: 12px; margin: 0; }
.lsd.is-studio .lsd-bot__poses { width: 74px; animation: none; }
.lsd.is-studio .lsd-bot__say { flex: 1; max-width: none; margin: 4px 0 0; }
.lsd.is-studio .lsd-bot__say p { font-size: 14px; }
/* the checklist */
.lsd.is-studio .lsd-check { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .04); color: #fff; }
.lsd-check__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.lsd-check__head span { font: 700 13px/1 "Golos Text", sans-serif; color: var(--ls-accent); }
.lsd-check__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lsd-check__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ls-accent), #ff6a5c); transition: width .6s var(--ls-ease); }
.lsd-check__list { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.lsd-check__list li { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; border-radius: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.lsd-check__list li span { flex: 1; }
.lsd-check__list li i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%; font-style: normal; font-size: 12px; }
.lsd-check__list li.is-ok { color: #fff; }
.lsd-check__list li.is-ok i { border-color: #2fbf71; background: #2fbf71; }
.lsd-check__list li.is-ok i::before { content: "✓"; color: #fff; }
.lsd-check__list li.is-wait { opacity: .5; }
.lsd-check__list li button { flex: none; padding: 5px 12px; border: 1px solid rgba(237, 41, 38, .6); border-radius: 99px; background: none; color: #fff; font-size: 12px; font-weight: 700; transition: background-color .25s; }
.lsd-check__list li button:hover { background: var(--ls-accent); }
.lsd-check__all { justify-self: stretch; margin-top: 4px; padding: 11px 16px; border: 0; border-radius: 12px; background: var(--ls-accent); color: #fff; font-size: 14px; font-weight: 700; transition: background-color .25s, transform .25s var(--ls-ease); }
.lsd-check__all:hover { background: var(--ls-accent-hover); transform: translateY(-1px); }
.lsd-check__all[hidden] { display: none; }
.lsd-check.is-done { border-color: rgba(47, 191, 113, .5); }
/* labelled tools in the studio, two rows when needed */
.lsd.is-studio .lsd-tools { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
.lsd.is-studio .lsd-tool span { display: inline; }
.lsd.is-studio .lsd-tool--icon { padding: 7px 10px; }
@media (max-width: 767px) {
	.lsd.is-studio .lsd-tools { flex-wrap: nowrap; overflow-x: auto; }
	.lsd.is-studio .lsd-tool span { display: none; }
	.lsd.is-studio .lsd__copy { padding-top: 0; }
	.lsd.is-studio .lsd-studio-head span { display: none; }
	.lsd.is-studio .lsd-close { height: 38px; padding: 0 12px 0 10px; font-size: 13px; }
}
@media (max-width: 991px) {
	.lsd.is-studio .lsd__copy > .lsd-check { display: grid; }
	.lsd.is-studio .lsd__copy { padding-top: 0; }
}
/* Star AI's markers on the board */
.lsd-tri { fill: rgba(47, 191, 113, .08); stroke: #2fbf71; stroke-width: 2; stroke-dasharray: 7 6; animation: lsd-dash 1.2s linear infinite; }
.lsd-tri.is-bad { fill: rgba(237, 41, 38, .06); stroke: var(--ls-accent); }
.lsd-tri__t { font: 700 13px/1 var(--ls-font-body); text-anchor: middle; fill: #1b8f52; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.lsd-tri__t.is-bad { fill: var(--ls-accent); }
.lsd-gapmark { fill: rgba(237, 41, 38, .14); stroke: var(--ls-accent); stroke-width: 1.5; stroke-dasharray: 5 4; animation: lsd-blink 1.4s ease-in-out infinite; }
.lsd-gapmark__t { font: 700 12px/1 var(--ls-font-body); text-anchor: middle; fill: var(--ls-accent); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
@keyframes lsd-dash { to { stroke-dashoffset: -26; } }
@keyframes lsd-blink { 50% { fill-opacity: .45; } }
/* the studio sits above the site header and floating buttons */
.lsd.is-studio .lsd__in { z-index: 1500; }
.lsd.is-studio .lsd-close, .lsd.is-studio .lsd-studio-head { z-index: 1510; }
.lsd-menu__list { z-index: 1520; }


/* ---------- Studio v3: «اكتب فكرتك» composer, more appliances, a bigger board ---------- */
.lsd-ask { display: none; }
.lsd.is-studio .lsd-ask { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(237, 41, 38, .35); border-radius: 16px; background: linear-gradient(160deg, rgba(237, 41, 38, .12), rgba(255, 255, 255, .03) 60%); color: #fff; }
.lsd-ask label { display: grid; gap: 3px; }
.lsd-ask label b { font-size: 15px; }
.lsd-ask label span { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.lsd-ask textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(6, 13, 26, .55); color: #fff; font: 500 14px/1.6 var(--ls-font-body); resize: vertical; }
.lsd-ask textarea::placeholder { color: rgba(255, 255, 255, .38); }
.lsd-ask textarea:focus { outline: none; border-color: var(--ls-accent); }
.lsd-ask__ex { display: flex; flex-wrap: wrap; gap: 6px; }
.lsd-ask__ex button { padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; background: none; color: rgba(255, 255, 255, .8); font-size: 12px; transition: border-color .25s, color .25s; }
.lsd-ask__ex button:hover { border-color: #fff; color: #fff; }
.lsd-ask__go { padding: 11px 16px; border: 0; border-radius: 12px; background: var(--ls-accent); color: #fff; font-size: 14.5px; font-weight: 700; transition: background-color .25s, transform .25s var(--ls-ease); }
.lsd-ask__go:hover { background: var(--ls-accent-hover); transform: translateY(-1px); }
.lsd-ask.is-busy { opacity: .6; pointer-events: none; }
.lsd-ask.is-busy .lsd-ask__go { animation: lsd-blink 1.2s ease-in-out infinite; }
.lsd-lbl--tiny { font-size: 9px; }
.lsd-shape--dw, .lsd-shape--wash { fill: #dfe4ea; stroke: #7d8794; }
.lsd-shape--mw { fill: rgba(10, 21, 39, .1); stroke: #0a1527; stroke-dasharray: 4 3; }
/* the board takes the room it has: less empty space around it */
.lsd.is-studio .lsd__in { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 28px clamp(20px, 2.4vw, 40px); padding-block: 70px 18px; align-items: start; }
.lsd.is-studio .lsd__copy { padding-top: 0; overflow-y: auto; max-height: calc(100vh * var(--z) - 90px); scrollbar-width: thin; }
.lsd.is-studio .lsd-board { width: min(100%, calc((100vh * var(--z) - 170px) * 1.316)); }
.lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: min(100%, calc((100vh * var(--z) - 170px) * 1.316)); }
@media (max-width: 991px) {
	.lsd.is-studio .lsd__in { grid-template-columns: 1fr; padding-top: 64px; }
	.lsd.is-studio .lsd__copy { max-height: none; overflow: visible; }
	.lsd.is-studio .lsd-board, .lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: 100%; }
}

/* ---------- Studio v4 polish: tools above the drawing, a tidy sidebar, calmer chrome ---------- */
.lsd-bot__head { display: none; }
.lsd.is-studio .lsd__in { padding-block: 74px 20px; background: radial-gradient(ellipse 80% 70% at 40% 40%, #12243f 0%, #0a1527 60%, #070e1c 100%); }
/* the drawing is never covered: the tools get their own strip at the top of the board */
.lsd.is-studio .lsd-board { padding-top: calc(var(--lsd-tools-h, 52px) + 18px); background: #efe9df; }
.lsd.is-studio .lsd-tools { top: 10px; inset-inline: 10px; flex-wrap: wrap; justify-content: center; gap: 2px 4px; padding: 6px; border-radius: 14px; background: #0a1527; box-shadow: none; }
.lsd.is-studio .lsd-tool { padding: 7px 10px; font-size: 12.5px; border-radius: 9px; }
.lsd.is-studio .lsd-tools__sep { height: 20px; }
/* the studio title lives at the top of the sidebar, not floating over it */
.lsd.is-studio .lsd-studio-head { position: static; max-width: none; padding: 0 2px 2px; }
.lsd.is-studio .lsd__copy { gap: 14px; scrollbar-width: none; }
.lsd.is-studio .lsd__copy::-webkit-scrollbar { display: none; }
/* Star AI card: small round avatar, name + live dot, message */
.lsd.is-studio .lsd-bot__head { display: flex; align-items: center; gap: 8px; margin-bottom: -6px; padding-inline: 4px; color: #fff; font-size: 14px; }
.lsd.is-studio .lsd-bot__head span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.lsd.is-studio .lsd-bot__head span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .2); }
.lsd.is-studio .lsd-bot { align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.lsd.is-studio .lsd-bot__poses { width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1d3358, #0a1527); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lsd.is-studio .lsd-bot__poses::after { display: none; }
.lsd.is-studio .lsd-bot__poses img { width: 150%; max-width: none; margin: -2px 0 0 -25%; }
.lsd.is-studio .lsd-bot__say { margin: 0; padding: 0; background: none; box-shadow: none; clip-path: none; color: #fff; }
.lsd.is-studio .lsd-bot__say p { font-size: 14px; font-weight: 500; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.lsd.is-studio .lsd-act { border-color: rgba(255, 255, 255, .25); color: #fff; }
.lsd.is-studio .lsd-act:hover { border-color: #fff; }
.lsd.is-studio .lsd-act--main { border-color: var(--ls-accent); }
/* composer & checklist: same card language */
.lsd.is-studio .lsd-ask { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.lsd.is-studio .lsd-ask textarea { min-height: 64px; }
.lsd.is-studio .lsd-check { padding: 14px; }
.lsd.is-studio .lsd-check__list li { min-height: 30px; font-size: 13px; }
/* the bar under the board */
.lsd.is-studio .lsd-status { color: rgba(255, 255, 255, .55); font-size: 12.5px; }
@media (max-width: 991px) {
	.lsd.is-studio .lsd-tools { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
	.lsd.is-studio .lsd-board { padding-top: 64px; }
}


/* studio grid: title + sidebar on one side, the board on the other */
.lsd.is-studio .lsd-studio-head { grid-column: 1; grid-row: 1; align-self: end; }
.lsd.is-studio .lsd__copy { grid-column: 1; grid-row: 2; max-height: calc(100vh * var(--z) - 150px); }
.lsd.is-studio .lsd__work { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 991px) {
	.lsd.is-studio .lsd-studio-head, .lsd.is-studio .lsd__copy, .lsd.is-studio .lsd__work { grid-column: 1; grid-row: auto; }
	.lsd.is-studio .lsd__work { order: 0; }
	.lsd.is-studio .lsd-studio-head { order: -2; }
}.lsd.is-studio .lsd-board, .lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: min(100%, calc((100vh * var(--z) - 190px - var(--lsd-tools-h, 52px)) * 1.316)); }
@media (max-width: 991px) { .lsd.is-studio .lsd-board, .lsd.is-studio .lsd-status, .lsd.is-studio .lsd-bar { width: 100%; } }

/* ==========================================================================
   Studio v5: one clear place for each thing.
   Header (title + exit) · side panel (Star AI, write your idea, ready shapes, checklist)
   · work area (top bar with info and the 3D button, tool rail beside the board).
   ========================================================================== */
.lsd:not(.is-studio) .lsd-quick, .lsd:not(.is-studio) .lsd-top { display: none; }
.lsd-quick { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .04); color: #fff; }
.lsd-quick > b { font-size: 14px; }
.lsd-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lsd-shapebtn { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; transition: border-color .25s, background-color .25s, color .25s; }
.lsd-shapebtn svg { width: 40px; height: 33px; color: #fff; }
.lsd-shapebtn:hover, .lsd-shapebtn:focus-visible { border-color: var(--ls-accent); background: rgba(237, 41, 38, .12); color: #fff; }
.lsd-ask__ex small { align-self: center; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* top bar over the board: what you drew + the next step */
.lsd.is-studio .lsd-top .lsd-bar { display: none; width: auto; margin: 0; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px; padding-inline-start: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.lsd.is-studio:not(.is-3d) .lsd-top .lsd-bar--draw, .lsd.is-studio.is-3d .lsd-top .lsd-bar--3d { display: flex; }
.lsd.is-studio .lsd-top .lsd-status { flex: 1; width: auto; min-height: 0; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.lsd.is-studio .lsd-top .lsd-go { order: 0; margin: 0; padding: 10px 22px; }
.lsd-top__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lsd.is-studio .lsd-mats small { margin-inline-end: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* tool rail: draw · change · history, labels always under the icons */
.lsd.is-studio .lsd-tools { grid-area: rail; position: static; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 2px; width: 86px; max-height: 100%; padding: 6px; overflow-x: visible; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: #0a1527; box-shadow: none; opacity: 1; pointer-events: auto; }
.lsd.is-studio .lsd-tool { flex-direction: column; justify-content: center; gap: 4px; width: 100%; padding: 8px 2px 7px; border-radius: 10px; font-size: 11.5px; line-height: 1.2; white-space: normal; text-align: center; }
.lsd.is-studio .lsd-tool span { display: block; }
.lsd.is-studio .lsd-menu { display: block; }
.lsd.is-studio .lsd-tool--menu { position: relative; }
.lsd.is-studio .lsd-tool--menu .lsd-menu__chev { position: absolute; top: 6px; inset-inline-end: 6px; }
.lsd.is-studio .lsd-tools__sep { width: auto; height: 1px; margin: 5px 8px; }
.lsd.is-studio .lsd-tools__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lsd.is-studio .lsd-tools__pair .lsd-tool { padding: 9px 2px; }
.lsd.is-studio .lsd-tools__pair .lsd-tool span { display: none; }
.lsd.is-studio.is-3d .lsd-tools { display: none; }

.lsd.is-studio .lsd-board { grid-area: board; padding: 0; }
.lsd.is-studio .lsd-svg { padding-top: 0; }
.lsd.is-studio.is-3d .lsd-board { grid-column: 1 / -1; }

@media (min-width: 992px) {
	.lsd.is-studio .lsd__in { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head" "side work"; gap: 14px 28px; padding: 14px clamp(16px, 2.4vw, 36px) 16px; align-items: stretch; overflow: hidden; }
	.lsd.is-studio .lsd-studio-head { grid-area: head; position: static; align-self: center; justify-self: start; padding: 0; }
	.lsd.is-studio .lsd-close { grid-area: head; position: static; align-self: center; justify-self: end; }
	.lsd.is-studio .lsd__copy { grid-area: side; min-height: 0; max-height: none; padding: 0 0 8px; overflow-y: auto; }
	.lsd.is-studio .lsd__work { grid-area: work; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "rail board"; gap: 12px 14px; min-height: 0; align-items: start; }
	.lsd.is-studio .lsd-top { grid-area: top; }
	/* the board keeps the plan's proportions and fits under the bars */
	.lsd.is-studio .lsd-board { justify-self: center; width: min(100%, calc((100vh * var(--z) - 150px) * 1.316)); }
	.lsd.is-studio.is-3d .lsd-board { width: min(100%, calc((100vh * var(--z) - 150px) * 1.316)); }
}
@media (max-width: 991px) {
	.lsd.is-studio .lsd__in { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 14px 24px; }
	.lsd.is-studio .lsd__work { display: grid; gap: 10px; }
	.lsd.is-studio .lsd-top { order: 1; }
	.lsd.is-studio .lsd-tools { order: 2; flex-direction: row; width: auto; max-height: none; overflow-x: auto; overflow-y: hidden; }
	.lsd.is-studio .lsd-tool { flex: none; width: 64px; font-size: 10.5px; }
	.lsd.is-studio .lsd-menu { flex: none; }
	.lsd.is-studio .lsd-tools__sep { width: 1px; height: auto; margin: 8px 3px; }
	.lsd.is-studio .lsd-tools__pair { flex: none; grid-template-columns: 44px 44px; }
	.lsd.is-studio .lsd-tools__pair .lsd-tool { width: 44px; }
	.lsd.is-studio .lsd-board { order: 3; width: 100%; padding-top: 0; }
	.lsd.is-studio .lsd-top .lsd-bar { flex-wrap: wrap; }
	.lsd.is-studio .lsd-top .lsd-go { flex: 1 1 auto; }
}
@media (min-width: 992px) {
	.lsd.is-studio .lsd-board, .lsd.is-studio.is-3d .lsd-board { justify-self: start; margin-inline: 0; width: min(100%, calc((100vh * var(--z) - 186px) * 1.316)); }
}
@media (min-width: 992px) {
	.lsd.is-studio .lsd__work { grid-template-columns: auto minmax(0, calc((100vh * var(--z) - 186px) * 1.316)); justify-content: center; }
	.lsd.is-studio .lsd-board, .lsd.is-studio.is-3d .lsd-board { width: 100%; }
}
@media (min-width: 0px) {
	.lsd-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsd-shapebtn { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; text-align: start; }
	.lsd-shapebtn svg { width: 34px; height: 28px; flex: none; }
	.lsd.is-studio .lsd-ask textarea { min-height: 56px; }
	.lsd.is-studio .lsd-tool--menu .lsd-menu__chev { top: 8px; inset-inline-end: 8px; opacity: .6; }
}
@media (min-width: 992px) {
	.lsd.is-studio.is-3d .lsd-board { grid-column: 1 / -1; justify-self: center; width: min(100%, calc((100vh * var(--z) - 186px) * 1.316)); }
}
@media (max-width: 991px) {
	.lsd.is-studio .lsd-top, .lsd.is-studio .lsd-tools, .lsd.is-studio .lsd-board { grid-area: auto; grid-column: auto; }
	.lsd.is-studio .lsd__work { order: -1; grid-template-columns: minmax(0, 1fr); }
	.lsd.is-studio .lsd-studio-head { order: -2; }
	.lsd.is-studio .lsd__copy > .lsd-ask, .lsd.is-studio .lsd__copy > .lsd-quick { display: grid; }
}

/* ---------- Team: the cards glide all the time (data-car-flow) ---------- */
.team-car.is-flow .team-car__track { scroll-snap-type: none; scroll-behavior: auto; }
.team-car.is-flow .team-car__dots { display: none; }

/* ---------- Team: Star AI flies into the empty corner of the heading ---------- */
.team__head { position: relative; }
.team-bot { --edge: 1; --mir: -1; position: absolute; bottom: 70px; inset-inline-end: 6px; z-index: 3; width: 140px; padding: 0; border: 0; background: none; cursor: pointer; }
[dir="rtl"] .team-bot { --edge: -1; --mir: 1; }
.team-bot__fly { position: relative; display: block; aspect-ratio: 466 / 600; }
.team-bot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(var(--mir)); transition: opacity .15s; filter: drop-shadow(0 16px 18px rgba(10, 21, 39, .22)); }
.team-bot__img--power { opacity: 0; }
/* jet trail while flying in (behind the robot, on the side it comes from) */
.team-bot__fly::before { content: ""; position: absolute; top: 44%; inset-inline-end: 62%; width: 260px; height: 10px; border-radius: 10px; background: linear-gradient(to left, rgba(237, 41, 38, 0), rgba(237, 41, 38, .65)); opacity: 0; filter: blur(1px); pointer-events: none; }
[dir="rtl"] .team-bot__fly::before { background: linear-gradient(to right, rgba(237, 41, 38, 0), rgba(237, 41, 38, .65)); }
/* the ring that bursts from the fist on the power move */
.team-bot__wave, .team-bot__wave::after { position: absolute; top: 37%; inset-inline-start: 15%; width: 22px; height: 22px; margin: -11px; border: 2px solid var(--ls-accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.team-bot__wave::after { content: ""; top: 50%; inset-inline-start: 50%; border-color: rgba(237, 41, 38, .55); }
.team-bot__tip { position: absolute; top: -30px; left: 50%; padding: 5px 12px; border-radius: 999px; background: #0a1527; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .3s, transform .3s var(--ls-ease); pointer-events: none; }

/* 1) waits off-screen, 2) flies in leaning forward, brakes and overshoots, 3) hovers */
.js .team-bot:not(.is-fly):not(.is-idle) .team-bot__fly { opacity: 0; transform: translateX(calc(var(--edge) * 60vw)); }
.team-bot.is-fly .team-bot__fly { animation: tbot-fly 1.15s cubic-bezier(.22, .8, .25, 1) both; }
.team-bot.is-fly:not(.is-idle) .team-bot__fly::before { animation: tbot-trail 1.15s ease-out both; }
.team-bot.is-idle .team-bot__fly, .team-bot.is-fly.is-idle .team-bot__fly { animation: tbot-float 3.6s ease-in-out infinite; }
@keyframes tbot-fly {
	0% { opacity: 0; transform: translate(calc(var(--edge) * 60vw), -70px) rotate(calc(var(--edge) * -24deg)) scale(.8); }
	12% { opacity: 1; }
	68% { transform: translate(calc(var(--edge) * -22px), 8px) rotate(calc(var(--edge) * 10deg)) scale(1.03); }
	84% { transform: translate(calc(var(--edge) * 7px), -4px) rotate(calc(var(--edge) * -3deg)) scale(1); }
	100% { opacity: 1; transform: none; }
}
@keyframes tbot-trail { 0%, 55% { opacity: 1; } 100% { opacity: 0; width: 40px; } }
@keyframes tbot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 4) the power move: wind up, punch towards the heading, ring bursts from the fist */
.team-bot.is-power .team-bot__img--idle { opacity: 0; }
.team-bot.is-power .team-bot__img--power { opacity: 1; }
.team-bot.is-power .team-bot__img { animation: tbot-punch .95s cubic-bezier(.3, .7, .2, 1) both; }
.team-bot.is-power .team-bot__wave { animation: tbot-wave .8s .28s ease-out both; }
.team-bot.is-power .team-bot__wave::after { animation: tbot-wave .8s .42s ease-out both; }
.team-bot.is-power .team-bot__tip, .team-bot:hover .team-bot__tip, .team-bot:focus-visible .team-bot__tip { opacity: 1; transform: translate(-50%, 0); }
@keyframes tbot-punch {
	0% { transform: scaleX(var(--mir)); }
	22% { transform: translateX(calc(var(--edge) * 8px)) rotate(calc(var(--edge) * 6deg)) scale(.93) scaleX(var(--mir)); }
	45% { transform: translateX(calc(var(--edge) * -12px)) rotate(calc(var(--edge) * -4deg)) scale(1.1) scaleX(var(--mir)); }
	70% { transform: translateX(calc(var(--edge) * -4px)) scale(1.03) scaleX(var(--mir)); }
	100% { transform: scaleX(var(--mir)); }
}
@keyframes tbot-wave {
	0% { opacity: .95; transform: scale(.3); box-shadow: 0 0 0 0 rgba(237, 41, 38, .45); }
	100% { opacity: 0; transform: scale(5.2); box-shadow: 0 0 0 10px rgba(237, 41, 38, 0); }
}
@media (max-width: 1199px) { .team-bot { width: 104px; } }
@media (max-width: 767px) {
	.team-bot { top: -18px; bottom: auto; width: 74px; }
	.team__head .shead { padding-inline-end: 70px; }
	.team-bot__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.team-bot .team-bot__fly, .team-bot .team-bot__img, .team-bot .team-bot__wave { animation: none !important; }
}

.team { overflow-x: clip; }
@media (max-width: 767px) { .team-bot { top: -34px; } }

/* ---------- Services (home): six columns over one picture, full width ---------- */
.sfan {
	position: relative; isolation: isolate; display: flex; overflow: hidden;
	width: calc(100vw * var(--z)); margin-inline-start: calc(50% - 50vw * var(--z)); margin-top: clamp(30px, 4vw, 50px);
	height: clamp(560px, calc(100vh * var(--z)), 1000px); height: clamp(560px, calc(100svh * var(--z)), 1000px); background: #0a1527; color: #fff; /* a full screen, so no strip shows under it */
}
/* the full-width photo of the hovered service, drifting slowly left to right */
.sfan__bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sfan__bg { position: absolute; top: 0; left: 0; width: 110%; max-width: none; height: 100%; object-fit: cover; opacity: 0; transform: translate3d(-9%, 0, 0); transition: opacity .8s ease; animation: sfan-pan 28s ease-in-out infinite alternate; }
.sfan__bg.is-on { opacity: 1; }
@keyframes sfan-pan { from { transform: translate3d(-9%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.sfan__item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; overflow: hidden; color: #fff; text-decoration: none; }
.sfan__item + .sfan__item { box-shadow: inset 1px 0 rgba(255, 255, 255, .22); }
[dir="rtl"] .sfan__item + .sfan__item { box-shadow: inset -1px 0 rgba(255, 255, 255, .22); }
/* Light Star state: each column shows its own photo, together one picture */
.sfan__media { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .8s ease; }
.sfan.is-main .sfan__media { opacity: 1; }
.sfan__img { position: absolute; top: 0; left: 0; width: 116%; max-width: none; height: 100%; object-fit: cover; transform: translate3d(-12%, 0, 0); animation: sfan-pan-col 28s ease-in-out infinite alternate; }
@keyframes sfan-pan-col { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* no veil on the photos: a navy shade rises from the bottom behind the text only */
.sfan__shade { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, rgba(6, 14, 30, .9) 0%, rgba(6, 14, 30, .6) 45%, rgba(6, 14, 30, .25) 75%, rgba(6, 14, 30, 0) 100%); pointer-events: none; }
/* the active column gets a soft glass lift so it reads as selected */
.sfan__item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 21, 39, .45), rgba(10, 21, 39, 0) 70%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.sfan__item.is-active::before { opacity: 1; }
.sfan__item::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--ls-accent); transform: scaleX(0); transition: transform .6s cubic-bezier(.22, .8, .24, 1); }
.sfan__item.is-active::after { transform: scaleX(1); }

.sfan__body { position: absolute; inset: auto 0 0; z-index: 2; display: grid; justify-items: start; gap: 10px; padding: 0 clamp(18px, 2vw, 30px) clamp(26px, 4vh, 44px); }
.sfan__ico { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(10, 21, 39, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .4s, border-color .4s; }
.sfan__item.is-active .sfan__ico { border-color: var(--ls-accent); background: var(--ls-accent); }
.sfan__title { font: 800 clamp(17px, 1.35vw, 22px)/1.35 var(--ls-font-display); text-shadow: 0 2px 14px rgba(6, 14, 30, .55); }
.sfan__more { display: grid; justify-items: start; gap: 12px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(10px); transition: max-height .5s cubic-bezier(.22, .8, .24, 1), opacity .3s, transform .5s; }
.sfan__item.is-active .sfan__more { max-height: 200px; opacity: 1; transform: none; transition: max-height .7s cubic-bezier(.22, .8, .24, 1) .1s, opacity .5s .2s, transform .6s .1s; }
.sfan__text { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 10px rgba(6, 14, 30, .6); }
.sfan__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ls-accent); font-size: 13.5px; font-weight: 700; transition: background-color .3s; }
.sfan__item:hover .sfan__cta { background: var(--ls-accent-hover, #c81f1c); }
.sfan__item:focus-visible { outline: 3px solid var(--ls-accent); outline-offset: -3px; }

/* entrance: columns rise in one after another */
.js .sfan:not(.is-in) .sfan__body { opacity: 0; transform: translateY(40px); }
.sfan.is-in .sfan__body { animation: sfan-rise .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .09s) both; }
@keyframes sfan-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.js .sfan:not(.is-in) .sfan__media { clip-path: inset(100% 0 0 0); }
.sfan.is-in .sfan__media { animation: sfan-reveal 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .09s) both; }
@keyframes sfan-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 991px) {
	/* tablets and phones: a vertical accordion, each service with its own photo */
	.sfan { flex-direction: column; width: auto; margin-inline-start: 0; height: auto; border-radius: 16px; background: none; gap: 8px; overflow: visible; }
	.sfan__bgs { display: none; }
	.sfan__item { flex: none; height: 118px; border-radius: 14px; box-shadow: none !important; transition: height .7s cubic-bezier(.22, .8, .24, 1); }
	.sfan__item.is-active { height: 360px; }
	.sfan__media, .sfan.is-main .sfan__media { opacity: 1; }
	.sfan__img { width: 100%; transform: none; animation: none; }
	.sfan__item::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sfan__bg, .sfan__img, .sfan__body, .sfan__media { animation: none !important; }
	.js .sfan:not(.is-in) .sfan__body { opacity: 1; transform: none; }
	.js .sfan:not(.is-in) .sfan__media { clip-path: none; }
}
/* each column frames its own product (--pos per column, set in services.php) */
.sfan__img { object-position: var(--pos, 50% 50%); }

/* Home: the clients band right under the services block uses the page background and sits centred
   in the gap (equal space above and below), so the gap reads as one clean separator */
.services-list:has(+ .clients), .services-list:has(+ .ls-curtain > .clients:first-child) { padding-bottom: 0; }
.services-list + .clients, .services-list + .ls-curtain > .clients:first-child { background: transparent; padding-block: clamp(56px, 6vw, 84px); }

/* Home: "how we work" keeps its curtain. The block above it holds still once its bottom reaches the
   screen's bottom (--ch = its height, from main.js) while the steps slide over it with the same
   rounded top and shadow they had over the journey. */
.ls-curtain > :first-child { position: sticky; top: min(0px, calc(100vh * var(--z) - var(--ch, 0px))); top: min(0px, calc(100svh * var(--z) - var(--ch, 0px))); z-index: 0; }
.ls-curtain > :first-child + * {
	position: relative; z-index: 2; background-color: var(--ls-bg);
	border-radius: 34px 34px 0 0; box-shadow: 0 -30px 80px rgba(3, 8, 18, .5);
}
@media (max-width: 991px) { .ls-curtain > :first-child + * { border-radius: 24px 24px 0 0; } }
/* the testimonials follow the journey without a curtain (owner's call) */
.lsn.is-pinned + .testi { margin-top: 0; border-radius: 0; box-shadow: none; z-index: auto; }

/* Services (home): the heading stays on the light page (keeps the colour rhythm under the navy
   about block). The photos start as a rounded card right under it and open to full width as you
   scroll (--open 0 → 1 from main.js, same language as the work band), so there is no straight seam. */
@media (min-width: 992px) {
	.services-list .sfan {
		--open: 1;
		clip-path: inset(0 calc((1 - var(--open)) * 5%) round calc((1 - var(--open)) * 30px));
	}
	.services-list .sfan__item::after { top: auto; bottom: 0; } /* the active red line sits at the bottom */
}

/* Home "من شغلنا" band: the photo/film stays still on the screen while the page moves over it.
   The layer is one screen tall and main.js moves it against the scroll (--fix), inside the frame. */
.home .vcta__bg.pimg, .home .vcta__video { inset: 0 0 auto; height: calc(100vh * var(--z)); height: calc(100svh * var(--z)); transform: translate3d(0, var(--fix, 0px), 0); }

/* Home: the closing "contact us" band sits closer to the block above it, and being shorter it also
   shortens the curtain the footer rises over (less scrolling back up from the footer) */
.home .cta-band { padding-block: clamp(48px, 5vw, 72px) clamp(56px, 5.5vw, 80px); }

/* ---------- Home testimonials: a wall (template-parts/home/testimonials-card.php) ----------
   A navy stat card over a photo, then every quote on its own white card, all visible at once. */
.twall { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.twall__stat { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 320px; overflow: hidden; border-radius: 22px; background: #0a1527; color: #fff; --curtain: var(--ls-surface-2); }
.twall__stat .pimg { position: absolute; inset: 0; z-index: -2; }
.twall__stat .pimg img { width: 100%; height: 100%; object-fit: cover; }
.twall__stat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 17, 33, .92) 0%, rgba(8, 17, 33, .55) 45%, rgba(8, 17, 33, .15) 100%); }
.twall__statin { display: grid; gap: 8px; padding: clamp(22px, 2.2vw, 32px); }
.twall__statin b { font: 700 clamp(44px, 4vw, 60px)/1 var(--ls-font-display); direction: ltr; justify-self: start; }
.twall__statin > span:last-child { font-size: 15px; color: rgba(255, 255, 255, .8); }
.twall__stars { display: inline-flex; gap: 3px; color: #f5b623; }
.twall__card {
	display: flex; flex-direction: column; gap: 18px; margin: 0; padding: clamp(24px, 2.2vw, 32px);
	border: 1px solid var(--ls-line); border-radius: 22px; background: #fff; box-shadow: 0 14px 40px rgba(10, 21, 39, .05);
	transition: transform .5s var(--ls-ease), box-shadow .5s var(--ls-ease), border-color .5s;
}
.twall__card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 26px 60px rgba(10, 21, 39, .12); }
.twall__top { display: flex; align-items: center; justify-content: space-between; }
.twall__q { color: var(--ls-accent); }
.twall__card blockquote { margin: 0; font: 500 clamp(19px, 1.6vw, 24px)/1.75 var(--ls-font-display); color: var(--ls-ink); }
.twall__card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ls-line); }
.twall__card figcaption .avatar { width: 42px; height: 42px; font-size: 17px; }
.twall__card figcaption b { font: 600 16px/1.3 var(--ls-font-display); color: var(--ls-ink); }
@media (max-width: 1199px) { .twall { grid-template-columns: repeat(2, 1fr); } .twall__stat { min-height: 300px; } }
@media (max-width: 575px) { .twall { grid-template-columns: 1fr; } .twall__stat { min-height: 240px; } }

/* ---------- Service pages: a film behind the header (template-parts/page-hero.php, 'video') ----------
   Full-bleed muted loop under a navy veil that is deeper on the reading side; the text sits on it. */
.phero--video { display: flex; align-items: center; min-height: calc(90vh * var(--z)); min-height: calc(90svh * var(--z)); background: #0a1527; }
.phero__film { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__film video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.phero__veil { position: absolute; inset: 0; z-index: -1; background:
	linear-gradient(to left, rgba(8, 17, 33, .9) 0%, rgba(8, 17, 33, .72) 38%, rgba(8, 17, 33, .38) 72%, rgba(8, 17, 33, .3) 100%),
	linear-gradient(to top, rgba(8, 17, 33, .75) 0%, rgba(8, 17, 33, 0) 35%); }
[dir="ltr"] .phero__veil { background:
	linear-gradient(to right, rgba(8, 17, 33, .9) 0%, rgba(8, 17, 33, .72) 38%, rgba(8, 17, 33, .38) 72%, rgba(8, 17, 33, .3) 100%),
	linear-gradient(to top, rgba(8, 17, 33, .75) 0%, rgba(8, 17, 33, 0) 35%); }
.phero--video .phero__ghost { display: none; }
.phero--video .phero__wrap { width: 100%; grid-template-columns: minmax(0, 720px); }
.phero--video .phero__title { text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
@media (max-width: 991px) {
	.phero__veil { background: linear-gradient(to top, rgba(8, 17, 33, .92) 0%, rgba(8, 17, 33, .6) 55%, rgba(8, 17, 33, .45) 100%); }
	.phero--video { align-items: flex-end; }
}

/* ---------- About header (template-parts/about-hero.php) ----------
   Layers, back to front: film + navy veil → client logos drifting in four loose rows →
   the founder (the "1") and a small duotone "28" of the team (together: 128) → title. */
.ahero { display: flex; align-items: center; min-height: calc(92vh * var(--z)); min-height: calc(92svh * var(--z)); }
.ahero .phero__wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.ahero .phero__inner { pointer-events: auto; }
.ahero__film { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ahero__film video { width: 100%; height: 100%; object-fit: cover; }
.ahero__veil { position: absolute; inset: 0; z-index: -1; background:
	linear-gradient(to left, rgba(8, 17, 33, .93) 0%, rgba(8, 17, 33, .84) 45%, rgba(8, 17, 33, .8) 100%),
	linear-gradient(to top, rgba(8, 17, 33, .8), rgba(8, 17, 33, 0) 40%); }
[dir="ltr"] .ahero__veil { background:
	linear-gradient(to right, rgba(8, 17, 33, .93) 0%, rgba(8, 17, 33, .84) 45%, rgba(8, 17, 33, .8) 100%),
	linear-gradient(to top, rgba(8, 17, 33, .8), rgba(8, 17, 33, 0) 40%); }

/* client logos: four rows over the whole header, each its own speed/direction/size, logos off the line */
.ahero__logos { position: absolute; inset: calc(var(--ls-header-h) - 10px) 0 0; z-index: 0; overflow: hidden; pointer-events: none;
	/* the logos fade out as they reach the 28 and the founder, and come back after them (no clutter) */
	--m28: radial-gradient(ellipse 25vw 36vh at 42% 50%, transparent 62%, #000 100%);
	--mfd: radial-gradient(ellipse 15vw 52vh at 18% 62%, transparent 60%, #000 100%);
	--med: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: var(--m28), var(--mfd), var(--med); -webkit-mask-composite: source-in, source-in;
	mask-image: var(--m28), var(--mfd), var(--med); mask-composite: intersect; }
[dir="ltr"] .ahero__logos { --m28: radial-gradient(ellipse 25vw 36vh at 58% 50%, transparent 62%, #000 100%); --mfd: radial-gradient(ellipse 15vw 52vh at 82% 62%, transparent 60%, #000 100%); }
@media (max-width: 991px) { .ahero__logos { --m28: radial-gradient(ellipse 40vw 16vh at 50% 30%, transparent 60%, #000 100%); --mfd: radial-gradient(ellipse 30vw 20vh at 50% 34%, transparent 60%, #000 100%); } }
.ahero__lrow { position: absolute; left: 0; display: flex; width: max-content; direction: ltr; animation: ah-drift var(--t, 100s) linear infinite; }
.ahero__lrow.is-rev { animation-direction: reverse; }
.ahero__lrow > span { display: flex; align-items: center; gap: var(--gap, 110px); padding-right: var(--gap, 110px); }
.ahero__lrow i { display: block; transform: translateY(var(--dy, 0)) scale(var(--k, 1)); animation: ah-fade var(--fd, 12s) ease-in-out var(--fl, 0s) infinite; }
@keyframes ah-fade { 0%, 100% { opacity: 0; } 25%, 55% { opacity: 1; } 75% { opacity: 0; } }
.ahero__lrow img { display: block; width: auto; height: var(--h, 44px); max-width: calc(var(--h, 44px) * 4); object-fit: contain; filter: brightness(0) invert(1); opacity: var(--o, .22); }
.ahero__lrow i.is-tone img { filter: grayscale(1) contrast(1.15) brightness(1.2); opacity: calc(var(--o, .22) * 1.1); }
.ahero__lrow--1 { top: 6%;  --h: 36px; --o: .16; --gap: 120px; filter: blur(.8px); }
.ahero__lrow--2 { top: 30%; --h: 54px; --o: .26; --gap: 140px; }
.ahero__lrow--3 { top: 55%; --h: 42px; --o: .2;  --gap: 110px; filter: blur(.4px); }
.ahero__lrow--4 { top: 79%; --h: 48px; --o: .23; --gap: 130px; }
@keyframes ah-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the founder, faint, in the background of the scene */
.ahero__founder {
	position: absolute; bottom: 0; left: clamp(10px, 4vw, 80px); z-index: 0; height: 88%; width: auto;
	opacity: .38; filter: grayscale(1); pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%, #000 80%, transparent 100%);
	mask-image: linear-gradient(to top, transparent 0, #000 22%, #000 80%, transparent 100%);
}
/* the star of the header: a big, light "28" in the middle, the logo faint behind it */
.ahero__center {
	position: absolute; top: calc(50% + var(--ls-header-h) / 2); left: 42%; z-index: 1;
	display: grid; justify-items: center; width: clamp(340px, 38vw, 640px); transform: translate(-50%, -50%); pointer-events: none;
}
.ahero__mark { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; opacity: .05; transform: translate(-50%, -54%); }
.ahero__num { position: relative; width: 100%; height: auto; overflow: visible; }
.ahero__glyph { font: 800 700px/1 "Cal Sans", sans-serif; letter-spacing: -30px; }
.ahero__line28 { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .75); stroke-width: 2.2; stroke-dasharray: 3200; stroke-dashoffset: 3200; animation: ah-draw 4.5s cubic-bezier(.4, 0, .2, 1) .4s forwards; }
.ahero__ghost28 { fill: none; stroke: rgba(237, 41, 38, .45); stroke-width: 1.4; stroke-dasharray: 6 10; opacity: 0; animation: ah-in 1.6s ease 3.2s forwards; }
.ahero__marks path, .ahero__dim path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; }
.ahero__dim text { direction: ltr; unicode-bidi: bidi-override; font: 600 26px/1 "Cal Sans", sans-serif; letter-spacing: .3em; fill: rgba(255, 255, 255, .6); }
.ahero__marks, .ahero__dim { opacity: 0; animation: ah-in 1.4s ease 2.6s forwards; }
@keyframes ah-draw { to { stroke-dashoffset: 0; } }
@keyframes ah-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ahero__line28 { stroke-dashoffset: 0; animation: none; } .ahero__ghost28, .ahero__marks, .ahero__dim { opacity: 1; animation: none; } }
.ahero__cap { position: relative; margin-top: -2%; font: 700 clamp(18px, 1.8vw, 28px)/1.3 var(--ls-font-display); color: rgba(255, 255, 255, .5); letter-spacing: .02em; }
.ahero__note { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, .7); }
.ahero__note b { font: 700 28px/1 "Cal Sans", var(--ls-font-display); color: var(--ls-accent); }
[dir="ltr"] .ahero__founder { left: auto; right: clamp(10px, 4vw, 80px); }
[dir="ltr"] .ahero__center { left: 58%; }
@media (prefers-reduced-motion: reduce) { .ahero__lrow, .ahero__lrow i { animation: none; } }
@media (max-width: 991px) {
	.ahero { align-items: flex-end; min-height: calc(100svh * var(--z)); }
	.ahero__founder { left: 50%; height: 60%; transform: translateX(-50%); }
	/* phones: the 28 sits above the title in the flow, not over it */
	.ahero { flex-direction: column; justify-content: flex-end; align-items: stretch; padding-top: calc(var(--ls-header-h) + 20px); }
	.ahero__center { position: relative; top: auto; left: auto; z-index: 1; width: min(66vw, 300px); margin: 0 auto 8px; transform: none; }
	.ahero__lrow--1 { top: 4%; } .ahero__lrow--2 { top: 22%; } .ahero__lrow--3 { top: 40%; } .ahero__lrow--4 { top: 58%; }
}

/* ---------- Contact page (page-2014.php) ----------
   Header: the client logos drift over the film and fade out behind the title (no clutter). */
.ahero__logos--contact {
	--m28: radial-gradient(ellipse 34vw 34vh at 74% 50%, transparent 58%, #000 100%);
	--mfd: linear-gradient(#000, #000);
}
[dir="ltr"] .ahero__logos--contact { --m28: radial-gradient(ellipse 34vw 34vh at 26% 50%, transparent 58%, #000 100%); }
.chero .phero__wrap { position: relative; z-index: 2; }
/* Arabic form: fields, placeholders and labels read from the right */
[dir="rtl"] .ccta__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] .ccta__form textarea, [dir="rtl"] .ccta__form select, [dir="rtl"] .ccta__form label,
[dir="rtl"] .ccta__form .wpcf7-form p { direction: rtl; text-align: right; }
[dir="rtl"] .ccta__form input[type="email"], [dir="rtl"] .ccta__form input[type="tel"] { direction: rtl; text-align: right; }
@media (max-width: 991px) { .ahero__logos--contact { --m28: radial-gradient(ellipse 60vw 26vh at 50% 62%, transparent 58%, #000 100%); } }
/* channels: four cards lifted over the header's edge */
.chero { padding-bottom: clamp(130px, 12vw, 170px); }
.ahero__logos--contact .ahero__lrow img { opacity: calc(var(--o, .22) * 1.5); }
.cchan { position: relative; z-index: 3; margin-top: calc(clamp(90px, 9vw, 120px) * -1); padding-bottom: clamp(60px, 6vw, 90px); }
.cchan__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cchan__card {
	position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; overflow: hidden;
	border-radius: 22px; background: #fff; color: var(--ls-text); box-shadow: 0 24px 60px rgba(10, 21, 39, .14);
	transition: transform .5s var(--ls-ease), box-shadow .5s var(--ls-ease);
}
.cchan__card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--ls-accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ls-ease); }
.cchan__card:hover { box-shadow: 0 34px 70px rgba(10, 21, 39, .2); }
.cchan__card:hover::after { transform: scaleX(1); }
.cchan__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--ls-ink); color: #fff; transition: background-color .4s; }
.cchan__card:hover .cchan__ico { background: var(--ls-accent); }
.cchan__card h3 { margin: 0; font-size: 19px; color: var(--ls-ink); }
.cchan__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--ls-accent); }
@media (max-width: 1199px) { .cchan__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cchan__grid { grid-template-columns: 1fr; } }
/* channels: one main value (copyable), extra numbers folded, action at the bottom */
.cchan__card:hover { transform: translateY(-6px); }
.cchan__val { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ls-surface-2); }
.cchan__val > span { min-width: 0; font: 600 15px/1.5 var(--ls-font-display); color: var(--ls-ink); overflow-wrap: anywhere; }
[dir="rtl"] .cchan__val > span { text-align: right; }
.cchan__copy { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--ls-line); border-radius: 99px; background: #fff; color: var(--ls-ink); font: 600 12.5px/1 var(--ls-font-display); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.cchan__copy:hover { border-color: var(--ls-ink); }
.cchan__copy.is-copied { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.cchan__more summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ls-text); cursor: pointer; list-style: none; }
.cchan__more summary::-webkit-details-marker { display: none; }
.cchan__more summary::after { content: "+"; font-weight: 700; color: var(--ls-accent); }
.cchan__more[open] summary::after { content: "−"; }
.cchan__more ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.cchan__more li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.cchan__more li a { color: var(--ls-ink); }
/* contact v3: photo header with a slow zoom; values copy on click; the form band is light */
.chero__photo img { width: 100%; height: 100%; object-fit: cover; animation: chero-zoom 26s ease-in-out infinite alternate; }
@keyframes chero-zoom { from { transform: scale(1.02); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .chero__photo img { animation: none; } }
.cchan__val { padding: 0; background: none; }
.cchan__copy {
	position: relative; display: block; width: 100%; padding: 11px 14px; border: 1px dashed transparent; border-radius: 12px;
	background: var(--ls-surface-2); color: var(--ls-ink); font: 600 15px/1.5 var(--ls-font-display); text-align: start; cursor: copy;
	user-select: all; overflow-wrap: anywhere; transition: border-color .3s, background-color .3s;
}
[dir="rtl"] .cchan__copy[dir="ltr"] { text-align: right; }
.cchan__copy:hover { border-color: rgba(10, 21, 39, .25); background: #eef0f4; }
.cchan__copy::after {
	content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 5px 10px; border-radius: 8px;
	background: var(--ls-ink); color: #fff; font-size: 12px; white-space: nowrap; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.cchan__copy.is-copied { border-color: #1f9d55; background: rgba(31, 157, 85, .08); color: var(--ls-ink); }
.cchan__copy::selection { background: rgba(237, 41, 38, .18); color: var(--ls-ink); }
.cchan__copy.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.cchan__more li { gap: 8px; }
.cchan__more li .cchan__copy { flex: 1; width: auto; min-width: 0; padding: 7px 12px; font-size: 14px; }
.cchan__more li > a { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ls-ink); color: #fff; }
.cchan__more li > a:hover { background: var(--ls-accent); }
.ccta--navy { padding-top: clamp(70px, 7vw, 110px); }
.ccta--navy .ccta__form { padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; background: rgba(255, 255, 255, .03); }
/* ---------- Catalog viewer (template-parts/catalog-viewer.php) ---------- */
.cat { outline: none; }
.cat__stage { position: relative; overflow: hidden; border-radius: 22px; background: #0f1c33; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.cat__track { position: relative; aspect-ratio: 16 / 9; touch-action: pan-y; cursor: grab; }
.cat__page { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .8s var(--ls-ease); }
.cat__page.is-on { opacity: 1; transform: none; }
.cat__page img { width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; }
.cat__nav {
	position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(10, 21, 39, .78); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); cursor: pointer; transform: translateY(-50%); transition: background-color .3s, transform .3s var(--ls-ease);
}
.cat__nav:hover { background: var(--ls-accent); }
/* the catalog pages read left to right: next on the right, back on the left, in both languages */
.cat__nav--next { left: 18px; }
.cat__nav--prev { right: 18px; }
.cat__nav--prev svg { transform: scaleX(-1); }
[dir="ltr"] .cat__nav--next { right: 18px; left: auto; }
[dir="ltr"] .cat__nav--prev { left: 18px; right: auto; }
[dir="ltr"] .cat__nav--prev svg { transform: none; }
[dir="ltr"] .cat__nav--next svg { transform: scaleX(-1); }
.cat__nav:disabled { opacity: .3; pointer-events: none; }
.cat__thumbs, .cat__bar { direction: ltr; }
.cat__count { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: rgba(10, 21, 39, .78); color: rgba(255, 255, 255, .8); font: 600 13px/1 "Golos Text", sans-serif; direction: ltr; }
.cat__count b { color: #fff; }
.cat__bar { position: absolute; inset: auto 0 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, .1); }
.cat__bar i { display: block; height: 100%; width: 0; background: var(--ls-accent); transition: width .5s var(--ls-ease); }
[dir="rtl"] .cat__bar i { margin-inline-start: 0; }
.cat__foot { display: flex; align-items: center; gap: 24px; margin-top: 22px; }
.cat__thumbs { display: flex; flex: 1; gap: 10px; min-width: 0; margin: 0; padding: 4px 2px 8px; list-style: none; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.cat__thumbs button { display: block; width: 120px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; opacity: .5; cursor: pointer; transition: opacity .3s, border-color .3s; }
.cat__thumbs button:hover { opacity: .85; }
.cat__thumbs button.is-on { border-color: var(--ls-accent); opacity: 1; }
.cat__thumbs img { display: block; width: 100%; height: auto; }
.cat__actions { display: flex; flex: none; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) {
	.cat__foot { flex-direction: column; align-items: stretch; }
	.cat__thumbs button { width: 90px; }
	.cat__nav { width: 42px; height: 42px; }
	.cat__actions .btn { flex: 1; justify-content: center; }
}
/* ---------- About: mission, vision, values as one statement block (page-1958.php .mvx) ---------- */
.mvx__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.mvx__tabs { display: grid; align-content: center; gap: 6px; }
.mvx__tab {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: baseline;
	padding: 22px 6px 22px; border: 0; border-bottom: 1px solid var(--ls-line); background: none; text-align: start; cursor: pointer; color: var(--ls-ink);
}
.mvx__n { grid-row: 1 / span 2; font: 700 14px/1 "Golos Text", sans-serif; color: #9aa1ad; transition: color .4s; }
.mvx__tab b { font: 800 clamp(30px, 3.2vw, 48px)/1.1 var(--ls-font-display); color: #c3c8d1; transition: color .4s; }
.mvx__tab small { font: 600 12px/1 "Golos Text", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #9aa1ad; margin-top: 8px; }
.mvx__tab:hover b { color: #7b8394; }
.mvx__tab[aria-selected="true"] b { color: var(--ls-ink); }
.mvx__tab[aria-selected="true"] .mvx__n { color: var(--ls-accent); }
.mvx__prog { position: absolute; inset: auto 0 -1px auto; height: 2px; width: 0; background: var(--ls-accent); }
[dir="ltr"] .mvx__prog { inset: auto auto -1px 0; }
.mvx__tab[aria-selected="true"] .mvx__prog { animation: mvx-prog 7s linear forwards; }
.mvx.is-hold .mvx__tab[aria-selected="true"] .mvx__prog { animation-play-state: paused; }
@keyframes mvx-prog { to { width: 100%; } }
.mvx__stage { position: relative; min-height: clamp(380px, 34vw, 480px); overflow: hidden; border-radius: 26px; background: #0a1527; }
.mvx__panel { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.mvx__panel.is-on { opacity: 1; visibility: visible; }
.mvx__bg { position: absolute; inset: 0; }
.mvx__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.mvx__panel.is-on .mvx__bg img { transform: scale(1); }
.mvx__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 13, 26, .94) 0%, rgba(6, 13, 26, .6) 50%, rgba(6, 13, 26, .15) 100%); }
.mvx__copy { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 640px; padding: clamp(26px, 3.4vw, 48px); color: rgba(255, 255, 255, .82); }
.mvx__label { font: 700 12px/1 "Golos Text", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--ls-accent); }
.mvx__lead { margin: 0; font: 800 clamp(26px, 2.6vw, 40px)/1.3 var(--ls-font-display); color: #fff; }
.mvx__copy p { margin: 0; font-size: 16px; line-height: 1.85; }
.mvx__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.mvx__chips li { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: rgba(255, 255, 255, .06); font: 600 14px/1 var(--ls-font-display); color: #fff; }
.mvx__panel.is-on .mvx__copy > * { animation: mvx-in .8s var(--ls-ease) both; }
.mvx__panel.is-on .mvx__copy > :nth-child(2) { animation-delay: .08s; }
.mvx__panel.is-on .mvx__copy > :nth-child(3) { animation-delay: .16s; }
.mvx__panel.is-on .mvx__copy > :nth-child(4) { animation-delay: .24s; }
@keyframes mvx-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .mvx__panel.is-on .mvx__copy > *, .mvx__tab[aria-selected="true"] .mvx__prog { animation: none; } .mvx__bg img { transition: none; } }
@media (max-width: 991px) {
	.mvx__grid { grid-template-columns: 1fr; }
	.mvx__tabs { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.mvx__tab { grid-template-columns: 1fr; padding: 14px 4px; }
	.mvx__n { grid-row: auto; }
	.mvx__tab b { font-size: 22px; }
	.mvx__tab small { display: none; }
	.mvx__stage { min-height: 460px; }
}
/* Dressing: the process head uses its free side (a line, the four steps as chips, one action) */
.dr-process__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.dr-process__head .shead { margin-bottom: 0; }
.dr-process__aside { display: grid; gap: 18px; justify-items: start; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--ls-line); border-radius: 22px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dr-process__aside p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--ls-text); }
.dr-process__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dr-process__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--ls-surface-2); font: 600 14px/1 var(--ls-font-display); color: var(--ls-ink); }
.dr-process__chips span { font: 700 12px/1 "Golos Text", sans-serif; color: var(--ls-accent); }
@media (max-width: 991px) { .dr-process__head { grid-template-columns: 1fr; } }
/* About "28": counts 1 → 28 (main.js), then "28 سنة بنصنع أحلامك" appears, then all of it fades away
   and leaves the space empty. Without JS or with reduced motion: the finished 28 and its line stay. */
.js .ahero__center[data-ahero28] .ahero__line28 { stroke-dashoffset: 0; animation: none; }
.js .ahero__center[data-ahero28] .ahero__cap { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform .9s var(--ls-ease); }
.ahero__center.is-said .ahero__cap { opacity: 1 !important; transform: none !important; }
.ahero__center { transition: opacity 1.6s ease, filter 1.6s ease; }
.ahero__center.is-gone { opacity: 0; filter: blur(6px); }
.ahero__center.is-counting .ahero__line28 { fill: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) { .ahero__center .ahero__cap { opacity: 1 !important; transform: none !important; } .ahero__center.is-gone { opacity: 1; filter: none; } }
/* Closing contact band: faint architectural line drawings (our own, scratchpad archgen.js) on both sides, fading toward the text */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before, .cta-band::after {
	content: ""; position: absolute; z-index: -1; bottom: -6%; width: min(44vw, 660px); aspect-ratio: 1; pointer-events: none;
	background: no-repeat center bottom / contain; opacity: .8;
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.cta-band::before { left: 0; background-image: url(../img/arch/arch-left.svg);
	-webkit-mask-image: linear-gradient(to right, #000 30%, transparent 96%), linear-gradient(to top, #000 55%, transparent);
	mask-image: linear-gradient(to right, #000 30%, transparent 96%), linear-gradient(to top, #000 55%, transparent); }
.cta-band::after { right: 0; background-image: url(../img/arch/arch-right.svg);
	-webkit-mask-image: linear-gradient(to left, #000 30%, transparent 96%), linear-gradient(to top, #000 55%, transparent);
	mask-image: linear-gradient(to left, #000 30%, transparent 96%), linear-gradient(to top, #000 55%, transparent); }
@media (max-width: 767px) { .cta-band::before, .cta-band::after { width: 70vw; opacity: .45; } }
/* Clients hero: the real sectors roll one at a time (count + name), set by main.js */
.csect { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 22px 0 6px; color: rgba(255, 255, 255, .7); font-size: 15px; }
.csect__lead { padding-inline-end: 14px; border-inline-end: 1px solid rgba(255, 255, 255, .25); }
.csect__roll { position: relative; display: inline-grid; min-height: 34px; }
.csect__item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 18px/1.2 var(--ls-font-display); white-space: nowrap;
	opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ls-ease); }
.csect__item b { font: 800 26px/1 "Cal Sans", sans-serif; color: var(--ls-accent); }
.csect__item .ls-icon { color: rgba(255, 255, 255, .6); }
.csect__item.is-on { opacity: 1; transform: none; }
.csect__item.is-out { opacity: 0; transform: translateY(-14px); }
/* Clients directory tabs: on desktop they all fit inside the page (share the row, wrap if needed); phones keep the swipe row with a fade hinting there is more */
@media (min-width: 992px) {
	.cdir__tabs { flex-wrap: wrap; overflow: visible; gap: 8px; }
	.cdir__tab { flex: 1 1 auto; justify-content: center; height: 46px; padding: 0 12px; gap: 7px; font-size: 13.5px; }
	.cdir__tab b { min-width: 24px; height: 24px; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 991px) {
	.cdir__tabs { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
	[dir="ltr"] .cdir__tabs { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
/* Home testimonials "tcar": tag + two-tone title, a summary row, then a row of quote cards past both page edges */
.tcar { overflow: hidden; }
.tcar__head { display: grid; grid-template-columns: minmax(180px, 22%) 1fr; }
.tcar__tag { align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface); font: 700 12.5px/1 var(--ls-font-display); color: var(--ls-ink); }
.tcar__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-accent); }
.tcar__main { padding-inline-start: clamp(20px, 3vw, 40px); border-inline-start: 1px solid var(--ls-line); }
.tcar__title { margin: 0 0 26px; font-size: clamp(32px, 4vw, 56px); line-height: 1.2; }
.tcar__title em { font-style: normal; color: var(--ls-accent); }
.tcar__sum { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding-top: 24px; border-top: 1px solid var(--ls-line); }
.tcar__score { display: flex; align-items: center; gap: 14px; }
.tcar__score > b { font: 800 clamp(40px, 4vw, 56px)/1 "Cal Sans", sans-serif; color: var(--ls-ink); letter-spacing: -.02em; }
.tcar__score > span { display: grid; gap: 6px; }
.tcar__score small { font-size: 13px; color: var(--ls-text); }
.tcar__stars { display: inline-flex; gap: 2px; width: max-content; font-style: normal; color: #f5b301; }
.tcar__score .tcar__stars { padding: 4px 8px; border-radius: 999px; background: var(--ls-accent); color: #fff; }
.tcar__feat { max-width: 440px; margin: 0; font: 700 16px/1.6 var(--ls-font-display); color: var(--ls-ink); }
.tcar__nav { display: flex; gap: 10px; }
.tcar__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--ls-line); border-radius: 50%; background: var(--ls-surface); color: var(--ls-ink); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.tcar__btn:hover:not(:disabled) { background: var(--ls-dark); border-color: var(--ls-dark); color: #fff; }
.tcar__btn:disabled { opacity: .35; cursor: default; }
.tcar__btn[data-tcar-prev] svg { transform: scaleX(-1); }
/* the card row: starts in line with the page, runs off both edges, edges fade */
.tcar__viewport {
	--pad: max(var(--ls-gutter), calc((100% - var(--ls-container)) / 2 + var(--ls-gutter)));
	margin-top: clamp(36px, 4vw, 56px); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tcar__viewport::-webkit-scrollbar { display: none; }
.tcar__track { display: flex; gap: 20px; width: max-content; margin: 0; padding: 0 0 8px; list-style: none; }
.tcar__card { display: flex; flex-direction: column; gap: 18px; width: clamp(270px, 24vw, 340px); min-height: 250px; padding: 26px; border-radius: 20px; background: var(--ls-surface); scroll-snap-align: start; transition: box-shadow .35s, transform .35s var(--ls-ease); }
.tcar__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(10, 21, 39, .25); }
.tcar__card blockquote { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ls-text); }
.tcar__who { display: flex; align-items: center; gap: 12px; }
.tcar__who .avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ls-dark); color: #fff; font: 700 17px/1 var(--ls-font-display); }
.tcar__who > span:last-child { display: grid; gap: 3px; }
.tcar__who b { font: 700 16px/1.2 var(--ls-font-display); color: var(--ls-ink); }
.tcar__who small { font-size: 12.5px; color: var(--ls-text); }
@media (max-width: 991px) {
	.tcar__head { grid-template-columns: 1fr; gap: 16px; }
	.tcar__main { padding-inline-start: 0; border: 0; }
	.tcar__sum { grid-template-columns: 1fr auto; }
	.tcar__feat { grid-column: 1 / -1; grid-row: 2; }
	.tcar__viewport { -webkit-mask-image: none; mask-image: none; }
}@media (max-width: 991px) {
	.tcar__head, .tcar__sum { grid-template-columns: minmax(0, 1fr); }
	.tcar__sum { gap: 16px; }
	.tcar__feat { grid-column: auto; grid-row: auto; }
	.tcar__nav { justify-self: end; }
	.tcar__score > b { font-size: 40px; }
}
/* Cal Sans (Latin headings, menu, buttons) has a narrow word space: open it a little on the English site */
html[dir="ltr"] { word-spacing: .07em; }
/* Header: catalog link beside the language switch (book icon + word; icon only on narrow screens) */
.head-catalog { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: #fff; font: 600 14px/1 var(--ls-font-display); white-space: nowrap; transition: background-color .3s var(--ls-ease), color .3s var(--ls-ease), border-color .3s; }
.head-catalog:hover { background: #fff; border-color: #fff; color: var(--ls-ink); }
.head-catalog .ls-icon { flex: none; } /* white like the cart and phone icons beside it */
.site-header__actions > .head-catalog--nav, .nav__foot > .head-catalog:not(.head-catalog--nav) { display: none; }
@media (max-width: 1399px) { .site-header__actions > .head-catalog { width: 44px; padding: 0; justify-content: center; } .site-header__actions > .head-catalog span { display: none; } }
@media (max-width: 600px) { .site-header__actions > .head-catalog { display: none; } }
@media (min-width: 1200px) { .nav__foot > .head-catalog--nav { display: none; } }
#catalog { scroll-margin-top: calc(var(--ls-header-h, 80px) + 10px); }
/* About: 10-year warranty block. The big 10 counts up with a ring filling around it; four slides with progress tabs */
.wty { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 90% at 15% 50%, rgba(237, 41, 38, .22), transparent 60%), linear-gradient(160deg, #0d1a30, #070f1d); color: #fff; }
[dir="rtl"] .wty { background: radial-gradient(70% 90% at 85% 50%, rgba(237, 41, 38, .22), transparent 60%), linear-gradient(200deg, #0d1a30, #070f1d); }
.wty__ghost { position: absolute; inset-block: -8% auto; inset-inline-end: -4%; z-index: -1; font: 400 min(62vw, 760px)/.8 "Cal Sans", sans-serif; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .06); pointer-events: none; }
.wty__in { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; align-items: center; gap: clamp(30px, 6vw, 90px); }
.wty__num { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; }
.wty__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wty__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 3; }
.wty__bar { fill: none; stroke: var(--ls-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--wty-p, 100)); transition: stroke-dashoffset .12s linear; }
.wty__num b { font: 400 clamp(150px, 20vw, 300px)/.8 "Cal Sans", sans-serif; letter-spacing: -.04em; color: #fff; text-shadow: 0 0 0 rgba(237, 41, 38, 0); transition: text-shadow .8s, transform .8s var(--ls-ease); }
.wty.is-done .wty__num b { text-shadow: 0 0 60px rgba(237, 41, 38, .55); transform: scale(1.04); }
.wty__unit { position: absolute; bottom: 13%; font: 700 clamp(16px, 1.6vw, 22px)/1 var(--ls-font-display); color: var(--ls-accent); letter-spacing: .04em; }
.wty__title { margin: 16px 0 28px; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.2; color: #fff; }
.wty__title em { font-style: normal; color: var(--ls-accent); }
.wty__stage { position: relative; display: grid; min-height: 190px; }
.wty__slide { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .55s, transform .7s var(--ls-ease); }
.wty__slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wty__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ls-accent); box-shadow: 0 14px 30px rgba(237, 41, 38, .35); }
.wty__slide h3 { margin: 6px 0 0; font: 800 clamp(22px, 2.2vw, 30px)/1.3 var(--ls-font-display); color: #fff; }
.wty__slide p { max-width: 54ch; margin: 0; font-size: 17px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.wty__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.wty__tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 4px 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); background: none; color: rgba(255, 255, 255, .55); font: 700 15px/1 var(--ls-font-display); text-align: start; cursor: pointer; transition: color .3s; }
.wty__tab:hover, .wty__tab.is-on { color: #fff; }
.wty__tabn { font: 400 12px/1 "Cal Sans", sans-serif; color: var(--ls-accent); }
.wty__prog { position: absolute; top: -1px; inset-inline-start: 0; width: 0; height: 2px; background: var(--ls-accent); }
.wty__tab.is-on .wty__prog { animation: wty-prog var(--wty-dur, 6s) linear forwards; }
.wty.is-paused .wty__tab.is-on .wty__prog { animation-play-state: paused; }
@keyframes wty-prog { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .wty__slide { transition: none; } .wty__tab.is-on .wty__prog { animation: none; width: 100%; } }
@media (max-width: 991px) {
	.wty__in { grid-template-columns: 1fr; }
	.wty__num { max-width: 300px; }
	.wty__stage { min-height: 230px; }
	.wty__tabs { grid-template-columns: repeat(2, 1fr); }
}
.wty__num::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 40px rgba(237, 41, 38, 0); transition: box-shadow .8s; pointer-events: none; }
.wty.is-done .wty__num::before { box-shadow: 0 0 46px rgba(237, 41, 38, .35), inset 0 0 40px rgba(237, 41, 38, .18); }

/* the warranty block fills one screen, content centred */
.wty { display: grid; align-items: center; min-height: calc(100vh * var(--z, 1)); min-height: calc(100svh * var(--z, 1)); padding-block: clamp(70px, 8vh, 110px); box-sizing: border-box; }
.wty__num { max-width: min(460px, 62vh); }@media (max-width: 991px) {
	.wty { padding-block: 56px 40px; }
	.wty__in { gap: 18px; }
	.wty__num { max-width: min(220px, 30vh); }
	.wty__num b { font-size: clamp(110px, 32vw, 150px); }
	.wty__title { margin: 10px 0 16px; font-size: 28px; }
	.wty__stage { min-height: 196px; }
	.wty__ico { width: 42px; height: 42px; border-radius: 12px; }
	.wty__slide h3 { font-size: 20px; }
	.wty__slide p { font-size: 15px; line-height: 1.8; }
	.wty__tabs { margin-top: 14px; gap: 6px; }
	.wty__tab { padding: 10px 2px 12px; font-size: 13.5px; }
}
/* Compact page: exploded Compact HPL sheet (3D stack of its layers) beside slides that light one layer at a time;
   the last slide presses the layers back into one solid sheet */
.cpx__in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 5vw, 80px); }
.cpx__visual { position: relative; display: grid; place-items: center; height: clamp(380px, 38vw, 540px); perspective: 1700px; }
.cpx__stage { width: clamp(220px, 22vw, 320px); aspect-ratio: 1.42; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.cpx__stack { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; --gap: 30px; }
.cpx.is-pressed .cpx__stack { --gap: 3px; }
.cpx__l { position: absolute; inset: 0; border-radius: 5px; transform-style: preserve-3d; transform: translateZ(calc(var(--z) * var(--gap))); transition: transform .9s cubic-bezier(.22, .8, .24, 1), opacity .5s, box-shadow .5s; --t: 4px; --edge: #2c1d12; }
.cpx__l::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--t); background: var(--edge); transform-origin: top; transform: rotateX(-90deg); }
.cpx__l::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--t); background: var(--edge); filter: brightness(.8); transform-origin: left; transform: rotateY(90deg); }
.cpx__l--kraft { background: repeating-linear-gradient(90deg, #5a3f2b 0 3px, #4d3524 3px 7px), #4d3524; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); --edge: #2a1b10; }
.cpx__l--decor { background: repeating-linear-gradient(102deg, #c39465 0 7px, #b07f52 7px 12px, #cfa073 12px 20px, #a97a4e 20px 24px); --t: 3px; --edge: #8a6440; }
.cpx__l--overlay { background: linear-gradient(130deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .35)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); --t: 2px; --edge: rgba(255, 255, 255, .7); }
.cpx.has-hot .cpx__l { opacity: .32; }
.cpx.has-hot .cpx__l.is-hot { opacity: 1; transform: translateZ(calc(var(--z) * var(--gap) + 28px)); box-shadow: 0 0 0 2px var(--ls-accent), 0 24px 40px rgba(237, 41, 38, .35); }
.cpx.is-pressed .cpx__l { box-shadow: none; }
.cpx__badge { position: absolute; top: 10%; inset-inline-start: 6%; padding: 9px 16px; border-radius: 999px; background: var(--ls-accent); color: #fff; font: 700 14px/1 var(--ls-font-display); box-shadow: 0 12px 28px rgba(237, 41, 38, .35); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ls-ease); }
.cpx__badge.is-on { opacity: 1; transform: none; }
.cpx__title { margin: 14px 0 14px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.2; }
.cpx__title em { font-style: normal; color: var(--ls-accent); }
.cpx__lead { max-width: 56ch; margin: 0 0 26px; font-size: 17px; line-height: 1.9; color: var(--ls-text); }
.cpx__stage-t { display: grid; min-height: 170px; }
.cpx__slide { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; padding: 22px 24px; border-radius: 18px; background: var(--ls-surface); box-shadow: 0 18px 40px -22px rgba(10, 21, 39, .3); border-inline-start: 3px solid var(--ls-accent); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .5s, transform .65s var(--ls-ease); }
.cpx__slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cpx__no { font: 400 14px/1 "Cal Sans", sans-serif; color: var(--ls-accent); }
.cpx__slide h3 { margin: 0; font: 800 22px/1.3 var(--ls-font-display); color: var(--ls-ink); }
.cpx__slide p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--ls-text); }
.cpx__tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 22px; }
.cpx__tab { position: relative; padding: 12px 2px 14px; border: 0; border-top: 1px solid var(--ls-line); background: none; color: var(--ls-text); font: 700 14px/1 var(--ls-font-display); text-align: start; cursor: pointer; transition: color .3s; }
.cpx__tab:hover, .cpx__tab.is-on { color: var(--ls-ink); }
.cpx__prog { position: absolute; top: -1px; inset-inline-start: 0; width: 0; height: 2px; background: var(--ls-accent); }
.cpx__tab.is-on .cpx__prog { animation: wty-prog 6s linear forwards; }
.cpx.is-paused .cpx__tab.is-on .cpx__prog { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cpx__l, .cpx__slide { transition: none; } .cpx__tab.is-on .cpx__prog { animation: none; width: 100%; } }
@media (max-width: 991px) {
	.cpx__in { grid-template-columns: 1fr; }
	.cpx__visual { height: 320px; }
	.cpx__stack { --gap: 22px; }
	.cpx__stage-t { min-height: 200px; }
	.cpx__tabs { grid-template-columns: repeat(3, 1fr); }
}
/* Kitchens page header slider: the film, then the launch offer; the side photo stays fixed, only words and background change */
.khs { position: relative; display: grid; align-items: center; min-height: calc(90vh * var(--z, 1)); min-height: calc(90svh * var(--z, 1)); overflow: hidden; isolation: isolate; background: #0a1527; color: #fff; }
.khs__bg { position: absolute; inset: 0; z-index: -2; }
.khs__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.khs__layer.is-on { opacity: 1; }
.khs__layer video, .khs__layer img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.khs__layer.is-on img { animation: ls-kenburns 9s ease-out both; }
.khs__veil { position: absolute; inset: 0; background: linear-gradient(to left, rgba(8, 17, 33, .92) 0%, rgba(8, 17, 33, .7) 45%, rgba(8, 17, 33, .45) 100%); }
[dir="ltr"] .khs__veil { background: linear-gradient(to right, rgba(8, 17, 33, .92) 0%, rgba(8, 17, 33, .7) 45%, rgba(8, 17, 33, .45) 100%); }
.khs__wrap { position: relative; width: 100%; padding-block: 120px 120px; }
.khs__wrap .crumbs { margin-bottom: 28px; }
.khs__stage { display: grid; max-width: 640px; }
.khs__slide { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; visibility: hidden; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .8s var(--ls-ease), visibility 0s .6s; }
.khs__slide.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .25s, .25s, 0s; }
.khs__slide .phero__title { margin-top: 18px; }
.khs__slide--offer .phero__title { font-size: clamp(38px, 4.6vw, 74px); }
.khs__slide--offer .eyebrow { color: var(--ls-accent); }
.khs__ctl { position: absolute; z-index: 3; inset-inline: var(--ls-gutter); bottom: 34px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.khs__dots { display: flex; gap: 10px; }
.khs__dot { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(6, 13, 26, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(255, 255, 255, .7); font: 600 14px/1 var(--ls-font-display); cursor: pointer; overflow: hidden; transition: color .3s, border-color .3s, background-color .3s; }
.khs__dot b { font: 400 13px/1 "Cal Sans", sans-serif; color: var(--ls-accent); }
.khs__dot:hover, .khs__dot.is-on { color: #fff; border-color: rgba(255, 255, 255, .6); }
.khs__dot.is-on { background: rgba(255, 255, 255, .12); }
.khs__prog { position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 2px; background: var(--ls-accent); }
.khs__dot.is-on .khs__prog { animation: wty-prog var(--khs-ms, 7s) linear forwards; }
.khs.is-paused .khs__dot.is-on .khs__prog { animation-play-state: paused; }
.khs__arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: rgba(6, 13, 26, .35); color: #fff; cursor: pointer; transition: background-color .25s, color .25s; }
.khs__arrow:hover { background: #fff; color: var(--ls-ink); }
.khs__arrow--next svg { transform: scaleX(-1); }
[dir="ltr"] .khs__arrow:not(.khs__arrow--next) svg { transform: scaleX(-1); }
[dir="ltr"] .khs__arrow--next svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .khs__layer, .khs__slide { transition: none; } .khs__dot.is-on .khs__prog { animation: none; width: 100%; } .khs__layer.is-on img { animation: none; } }
@media (max-width: 767px) {
	.khs { align-items: end; }
	.khs__wrap { padding-block: 110px 120px; }
	.khs__dot span { display: none; }
	.khs__dot { padding: 12px 16px; }
}
@media (max-width: 767px) {
	.khs__wrap { padding-inline: 20px; }
	.khs__stage { max-width: 100%; }
	.khs__slide .phero__title { font-size: clamp(34px, 11vw, 50px); }
	.khs__slide--offer .phero__title { font-size: clamp(30px, 9.5vw, 44px); }
	.khs__slide .phero__lead { font-size: 15px; }
	.khs__slide .phero__actions { gap: 10px; }
}

/* Kitchens header: a big word mark at the side (28 % off, then 10 years) instead of a photo; it changes with the slide */

/* Kitchens header number: a big clean number at the side, like the warranty block on the About page; it counts up and settles */
.khs__marks { position: absolute; z-index: 2; top: 50%; inset-inline-end: calc(var(--ls-gutter) + 10px); width: clamp(300px, 30vw, 500px); height: clamp(300px, 30vw, 470px); transform: translateY(-52%); pointer-events: none; }
.khs__mark { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.khs__mark.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.khs__mark b { display: block; font: 400 clamp(170px, 20vw, 340px)/.82 "Cal Sans", sans-serif; letter-spacing: -.04em; color: #fff; text-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.khs__mark.is-on b { animation: khs-settle 1.1s cubic-bezier(.2, 1.3, .35, 1) .2s both; }
.khs__mark span { margin-top: 10px; font: 700 clamp(20px, 2vw, 30px)/1 var(--ls-font-display); letter-spacing: .04em; color: var(--ls-accent); opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .7s var(--ls-ease); }
.khs__mark.is-on span { opacity: 1; transform: none; transition-delay: 1.3s; }
@keyframes khs-settle { from { opacity: 0; transform: scale(.72) translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .khs__mark.is-on b { animation: none; } .khs__mark span { transition: none; opacity: 1; transform: none; } }
@media (max-width: 1099px) { .khs__marks { top: auto; bottom: 104px; inset-inline-end: 12px; width: 150px; height: 130px; transform: none; } .khs__mark b { font-size: 90px; } .khs__mark span { margin-top: 4px; font-size: 14px; } }
/* Home hero, slide 1: two badges in the label's shape (years in the market + the warranty) instead of one sentence */
.hs__pills { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hs__eyebrow--ico::before { display: none; }
.hs__eyebrow--ico { gap: 8px; padding: 9px 18px; font-size: 14px; }
.hs__eyebrow--ico .ls-icon { color: var(--ls-accent); }
.hs__text.is-active .hs__pills .hs__eyebrow:nth-child(2) { transition-delay: .4s; }
@media (max-width: 767px) { .hs__eyebrow--ico { padding: 7px 12px; font-size: 12px; } }

/* Kitchens header, warranty layer: our own 10-year seal (serrated edge, red ring, big 10, ribbon) stamps in instead of a plain number */
.khs__mark--seal svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); transform: rotate(-6deg); }
.khs__mark--seal.is-on svg { animation: khs-stamp 1.1s cubic-bezier(.2, 1.35, .4, 1) .15s both; }
.khs__seal-n { fill: #fff; font: 400 92px "Cal Sans", sans-serif; letter-spacing: -2px; }
.khs__seal-y { fill: #fff; font: 800 21px "Tajawal", "Cal Sans", sans-serif; }
[dir="ltr"] .khs__seal-y { font: 400 19px "Cal Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.khs__seal-t { fill: #fff; font: 800 14px "Tajawal", "Cal Sans", sans-serif; }
[dir="ltr"] .khs__seal-t { font: 400 12.5px "Cal Sans", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
@keyframes khs-stamp { from { opacity: 0; transform: scale(1.8) rotate(-24deg); } to { opacity: 1; transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .khs__mark--seal.is-on svg { animation: none; } }
@media (max-width: 1099px) { .khs__marks:has(.khs__mark--seal.is-on) { width: 150px; height: 164px; bottom: 96px; } }
@media (max-width: 1099px) { .khs__marks { inset-inline-end: auto; inset-inline-start: 12px; } }
/* Kitchens header, discount layer: «خصم» above a fat, puffy number with a red edge and depth, a small % in its corner, the group tilted */
.khs__mark--disc { transform: rotate(-6deg); }
.khs__mark--disc .khs__word { order: -1; position: relative; z-index: 2; margin-bottom: -.12em; font: 900 clamp(56px, 6.2vw, 108px)/1 "Tajawal", sans-serif; color: #fff; -webkit-text-stroke: 12px var(--ls-accent); paint-order: stroke fill; text-shadow: 0 7px 0 #8d1214, 0 22px 34px rgba(0, 0, 0, .45); transform: rotate(-4deg); opacity: 0; transition: opacity .5s .5s; }
[dir="ltr"] .khs__mark--disc .khs__word { font: 400 clamp(54px, 6vw, 100px)/1 "Cal Sans", sans-serif; text-transform: uppercase; }
.khs__mark.is-on.khs__mark--disc .khs__word { opacity: 1; }
.khs__num { position: relative; display: inline-block; }
.khs__mark--disc .khs__num b { color: #fff; -webkit-text-stroke: 7px var(--ls-accent); paint-order: stroke fill; letter-spacing: -.03em; text-shadow: 1px 1px 0 rgb(183, 22, 26), 2px 2px 0 rgb(176, 22, 26), 3px 3px 0 rgb(169, 22, 26), 4px 4px 0 rgb(162, 22, 26), 5px 5px 0 rgb(155, 22, 26), 6px 6px 0 rgb(148, 22, 26), 7px 7px 0 rgb(141, 22, 26), 8px 8px 0 rgb(134, 22, 26), 9px 9px 0 rgb(127, 22, 26), 10px 10px 0 rgb(120, 22, 26), 11px 11px 0 rgb(113, 22, 26), 12px 12px 0 rgb(106, 22, 26), 13px 13px 0 rgb(99, 22, 26), 0 34px 50px rgba(0, 0, 0, .5); }
.khs__num i { position: absolute; right: -.34em; bottom: .02em; font: 400 clamp(60px, 6.4vw, 110px)/1 "Cal Sans", sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 5px var(--ls-accent); paint-order: stroke fill; text-shadow: 1px 1px 0 #b81d1c, 2px 2px 0 #a81a1b, 3px 3px 0 #98171a, 4px 4px 0 #881518, 5px 5px 0 #781316, 0 16px 24px rgba(0, 0, 0, .45); }
@media (max-width: 1099px) { .khs__mark--disc .khs__word { -webkit-text-stroke: 7px var(--ls-accent); font-size: 40px; } .khs__mark--disc .khs__num b { -webkit-text-stroke: 4px var(--ls-accent); text-shadow: 1px 1px 0 #c8201f, 2px 2px 0 #bc1d1d, 3px 3px 0 #b01b1b, 4px 4px 0 #a41919, 5px 5px 0 #981717, 0 12px 20px rgba(0, 0, 0, .5); font-size: 84px; } .khs__num i { font-size: 36px; -webkit-text-stroke: 3px var(--ls-accent); } }
/* kitchens header: shorter, numbers on the side instead of arrows */
.khs { min-height: calc(66vh * var(--z, 1)); min-height: calc(66svh * var(--z, 1)); }
.khs__wrap { padding-block: 96px 84px; }
.khs__ctl { top: 50%; bottom: auto; inset-inline: auto; inset-inline-end: 16px; transform: translateY(-50%); flex-direction: column; justify-content: center; gap: 0; }
.khs__dots { flex-direction: column; gap: 12px; }
.khs__dot { justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.khs__dot b { color: inherit; font-size: 14px; }
.khs__dot.is-on b { color: var(--ls-accent); }
.khs__marks { inset-inline-end: calc(var(--ls-gutter) + 76px); }
@media (max-width: 1099px) { .khs__marks { inset-inline-end: auto; } }
@media (max-width: 767px) {
	.khs__wrap { padding-block: 96px 90px; padding-inline-end: 64px; }
	.khs__ctl { inset-inline-end: 10px; top: 40%; }
	.khs__dot { width: 40px; height: 40px; padding: 0; }
}@media (max-width: 1099px) { .khs__marks, .khs__marks:has(.khs__mark--seal.is-on) { bottom: 22px; } .khs__wrap { padding-block-end: 190px; } .khs--svc .khs__wrap { padding-block-end: 90px; } }
/* header slider: sized to sit inside a laptop screen (about 1366x650 visible) */
@media (min-width: 768px) {
	.khs { min-height: max(560px, calc(100vh * var(--z, 1))); min-height: max(560px, calc(100svh * var(--z, 1))); }
	.khs { padding-block: 0; }
	.khs__wrap { padding-block: 124px 56px; }
	.khs__wrap .crumbs { margin-bottom: 18px; }
	.khs__slide .phero__title { margin-top: 12px; font-size: clamp(34px, 3.9vw, 58px); line-height: 1.12; }
	.khs__slide--offer .phero__title { font-size: clamp(34px, 3.9vw, 58px); }
	.khs__slide .phero__lead { margin-top: 14px; font-size: 16px; line-height: 1.75; }
	.khs__slide .phero__actions { margin-top: 24px; }
	.khs__marks { top: 58%; width: clamp(260px, 25vw, 400px); height: clamp(260px, 25vw, 380px); }
	.khs__mark b { font-size: clamp(150px, 16vw, 270px); }
}
@media (max-width: 767px) { .khs { min-height: max(560px, calc(100vh * var(--z, 1))); min-height: max(560px, calc(100svh * var(--z, 1))); } }

/* ---------- Kitchen planner v5: ready shapes above the board, tap a cabinet unit, two colours, advanced tools ---------- */
.lsd-shapes { display: none; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; color: #fff; }
.lsd.is-studio:not(.is-3d) .lsd-shapes { display: flex; }
.lsd-shapes > b { flex: none; font-size: 13px; margin-inline-end: 2px; }
.lsd-shapes .lsd-shapebtn { grid-auto-flow: column; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12.5px; }
.lsd-shapes .lsd-shapebtn svg { width: 30px; height: 24px; }
@media (max-width: 767px) { .lsd-shapes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .lsd-shapes::-webkit-scrollbar { display: none; } .lsd-shapes .lsd-shapebtn { flex: none; white-space: nowrap; } }
.lsd-mh { stroke: #0a1527; stroke-opacity: .55; stroke-width: 2.2; stroke-linecap: round; }
.lsd-modsel { fill: var(--ls-accent); fill-opacity: .16; stroke: var(--ls-accent); stroke-width: 1.6; }
.lsd-pop { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 12px); }
.lsd-pop__mods { display: flex; align-items: center; gap: 2px; margin-inline-end: 4px; padding-inline-end: 6px; border-inline-end: 1px solid rgba(255, 255, 255, .2); direction: ltr; }
.lsd-pop__mods[hidden] { display: none; }
.lsd-pop button.is-on { background: var(--ls-accent); }
.lsd-pop button:disabled { opacity: .3; pointer-events: none; }
.lsd-pop__mods button { font-size: 16px; }
.lsd-adv:not([hidden]) { display: contents; }
.lsd-tool--adv.is-on { background: rgba(255, 255, 255, .14); color: #fff; }
.lsd-skip { display: none; margin: 4px 0 0; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-weight: 700; }
.lsd-skip:hover { background: var(--ls-accent); border-color: var(--ls-accent); }
.lsd.is-demo:not(.is-studio) .lsd-skip { display: inline-flex; align-self: flex-start; }
.lsd-prelim { display: none; margin: 8px 2px 0; font-size: 12px; color: rgba(255, 255, 255, .55); text-align: center; }
.lsd.is-studio .lsd-prelim { display: block; }
.lsd-chip--combo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; }
.lsd-chip--combo i { width: 12px; height: 12px; margin-inline-end: -3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }
.lsd-mats--dots { gap: 8px; }
.lsd-dot { width: 26px; height: 26px; padding: 0; border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--c, #fff); cursor: pointer; transition: transform .2s, border-color .2s; }
.lsd-dot:hover { transform: scale(1.12); }
.lsd-dot.is-on { border-color: var(--ls-accent); box-shadow: 0 0 0 2px rgba(237, 41, 38, .35); }
.lsd.is-studio .lsd-top .lsd-bar--3d { flex-wrap: wrap; row-gap: 8px; }
/* planner: the board always fits the screen height (the width is set from the real space left, see fitBoard in draw.js) */
.lsd.is-studio .lsd__note { display: block; margin: 12px 2px 0; text-align: center; }
@media (min-width: 992px) {
	.lsd.is-studio .lsd-board, .lsd.is-studio.is-3d .lsd-board { width: min(100%, var(--lsd-bw, 9999px)) !important; }
	.lsd.is-studio .lsd-shapes { margin-bottom: 8px; }
	.lsd.is-studio .lsd-top .lsd-bar { min-height: 44px; }
}
/* ---------- Kitchens page: the six material systems (template-parts/kitchen-materials.php) ---------- */
.km__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.km__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ls-line); border-radius: 22px; background: var(--ls-surface, #fff); transition: transform .4s var(--ls-ease), box-shadow .4s var(--ls-ease); }
.km__card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(10, 21, 39, .12); }
.km__fig { margin: 0; aspect-ratio: 1100 / 706; background: #8a8a8d; }
.km__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.km__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.km__core { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: rgba(10, 21, 39, .07); color: var(--ls-ink, #0a1527); font-size: 12px; font-weight: 700; }
.km__core--counter { background: rgba(176, 121, 61, .16); }
.km__core--boardium { background: rgba(56, 130, 120, .16); }
.km__name { margin: 2px 0 0; font-size: 21px; line-height: 1.25; }
.km__tag { margin: 0; color: var(--ls-accent); font-weight: 700; font-size: 14px; }
.km__lead { margin: 0; color: var(--ls-text); font-size: 14.5px; line-height: 1.8; }
.km__layers { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: l; }
.km__layers li { position: relative; padding-inline-start: 30px; font-size: 13px; line-height: 1.6; color: var(--ls-text); counter-increment: l; }
.km__layers li::before { content: counter(l); position: absolute; inset-inline-start: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ls-ink, #0a1527); color: #fff; font: 700 11px/1 var(--ls-font-display); }
.km__points { display: grid; gap: 6px; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--ls-line); list-style: none; }
.km__points li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.km__points svg { flex: none; margin-top: 4px; color: var(--ls-accent); }
.km__note { margin-top: 2px; color: var(--ls-muted, #5b6574); font-size: 12.5px; line-height: 1.6; }
.km__ask { margin-top: auto; padding-top: 6px; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 1099px) { .km__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .km__grid { grid-template-columns: 1fr; gap: 18px; } }
.km__try { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 28px 0 0; }
.km__try small { color: var(--ls-text); font-size: 14px; }

.km__spec, .km__proof { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; font-size: 13px; line-height: 1.65; }
.km__spec svg, .km__proof svg { flex: none; margin-top: 4px; color: var(--ls-accent); }
.km__proof { padding: 10px 12px; border-radius: 12px; background: rgba(47, 191, 113, .1); border: 1px solid rgba(47, 191, 113, .3); }
.km__proof a { color: var(--ls-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.km__sw { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 6px; }
.km__sw__i { display: grid; justify-items: center; gap: 3px; width: 54px; font-size: 10.5px; color: var(--ls-text); }
.km__sw__i img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--ls-line); }
.km__sw__i i { font-style: normal; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km__all { align-self: center; padding: 9px 14px; border: 1px solid var(--ls-line); border-radius: 999px; background: var(--ls-surface, #fff); color: var(--ls-ink, #0a1527); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .25s, color .25s; }
.km__all:hover { border-color: var(--ls-accent); color: var(--ls-accent); }
.km__ask, .km__ask:hover { color: var(--ls-ink, #0a1527); font-weight: 700; font-size: 14px; }
.km__ask svg { color: #25d366; }

/* materials as a moving carousel (same as the team block) */
.km-car { margin-top: 28px; }
.km__track { align-items: stretch; grid-auto-columns: calc((100% - 48px) / 3); }
.km__slide { display: flex; min-width: 0; }
.km__slide .km__card { width: 100%; }
.km__slide .km__card:hover { transform: none; }
@media (max-width: 1199px) { .km__track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 699px) { .km__track { grid-auto-columns: 86%; gap: 14px; } }
/* ---------- Projects page: the project list ---------- */
.pj-stats { display: flex; justify-content: center; gap: 14px; margin: 26px 0 8px; padding: 0; list-style: none; }
.pj-stats li { display: grid; justify-items: center; min-width: 130px; padding: 14px 22px; border: 1px solid var(--ls-line); border-radius: 16px; background: var(--ls-surface, #fff); }
.pj-stats b { font: 400 34px/1 "Cal Sans", var(--ls-font-display), sans-serif; color: var(--ls-accent); }
.pj-stats span { margin-top: 4px; font-size: 13px; color: var(--ls-text); }
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.pj { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--ls-line); border-radius: 22px; background: var(--ls-surface, #fff); transition: transform .4s var(--ls-ease), box-shadow .4s var(--ls-ease), opacity .3s; }
.pj:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(10, 21, 39, .1); }
.pj.is-hidden { display: none; }
.pj--feat { border-color: rgba(237, 41, 38, .35); background: linear-gradient(180deg, rgba(237, 41, 38, .04), transparent 40%), var(--ls-surface, #fff); }
.pj__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pj__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ls-ink, #0a1527); color: #fff; }
.pj--feat .pj__ico { background: var(--ls-accent); }
.pj__sector { color: var(--ls-accent); font-size: 13px; font-weight: 700; }
.pj__tag { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; background: rgba(237, 41, 38, .12); color: var(--ls-accent); font-size: 11.5px; font-weight: 700; }
.pj__name { margin: 4px 0 0; font-size: 20px; line-height: 1.35; }
.pj__loc { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ls-muted, #5b6574); font-size: 13px; }
.pj__text { margin: 2px 0 0; color: var(--ls-text); font-size: 14px; line-height: 1.8; }
@media (max-width: 1099px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .pj-grid { grid-template-columns: 1fr; gap: 14px; } .pj-stats li { min-width: 0; flex: 1; } }
/* materials carousel: arrows stay on phones, the dots show */
.km .team__arrows { display: flex; }
@media (max-width: 767px) { .km .team__arrows { justify-content: flex-end; margin: 12px 0 0; } .km .team__arrow { width: 44px; height: 44px; } }
.km .team-car__dots { margin-top: 22px; }

.km__proof { align-items: center; }
.km__proofimg { flex: none; display: block; width: 84px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--ls-line); }
.km__proofimg img { display: block; width: 100%; height: auto; }
.km__proof > span { display: block; }
.km__proof > span svg { display: inline; vertical-align: -3px; margin-inline-end: 4px; }

/* ---------- Kitchen journey (template-parts/kitchen-journey.php) ----------
   A dark stage: the six steps as a numbered list that advances by itself (a bar fills under the active one), and a large panel
   with a small drawing of the step, what the client does, what Light Star does, one fact and the way in. Phones: the list
   becomes a row of chips above the panel. Pause on hover / focus / tap; reduced motion = no autoplay, drawings already drawn. */
.kj2 { position: relative; overflow: clip; background: radial-gradient(60% 55% at 88% 6%, rgba(237, 41, 38, .2), transparent 70%), radial-gradient(50% 50% at 0 100%, rgba(255, 255, 255, .06), transparent 70%), var(--ls-dark); }
.kj2__stage { --kj: 0; --n: 6; margin-top: 44px; height: calc(var(--n) * 62vh + 560px); }
.kj2__pin { position: sticky; top: 96px; display: grid; gap: 22px; }
.kj2__view { position: relative; height: clamp(380px, calc(100vh - 250px), 640px); border-radius: 28px; overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); background: #0a1527; }
.kj2__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(20px, 3.4vw, 46px); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.kj2__panel.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.kj2__photo { position: absolute; inset: 0; z-index: -2; }
.kj2__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 16, 30, .96) 8%, rgba(8, 16, 30, .62) 48%, rgba(8, 16, 30, .15) 100%); }
.kj2__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj2__img { transform: scale(calc(1.02 + var(--sp, 0) * .1)); will-change: transform; }
.kj2__big { position: absolute; inset-inline-end: clamp(14px, 3vw, 40px); top: 6px; font: 400 clamp(110px, 18vw, 230px)/1 var(--ls-font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5); pointer-events: none; transform: translateY(14px); opacity: 0; transition: transform .8s .15s, opacity .8s .15s; }
.kj2__panel.is-on .kj2__big { transform: none; opacity: 1; }
.kj2__chip { position: absolute; inset-inline-start: clamp(14px, 3vw, 40px); top: clamp(14px, 3vw, 38px); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 99px; color: #fff; font-size: 14px; background: rgba(10, 21, 39, .5); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .28); transform: translateY(-12px); opacity: 0; transition: transform .6s .35s, opacity .6s .35s; }
.kj2__panel.is-on .kj2__chip { transform: none; opacity: 1; }
.kj2__chip b { font-weight: 700; }
.kj2__chip svg { color: var(--ls-accent); }
.kj2__chip em { font: 400 20px/1 var(--ls-font-display); font-style: normal; padding: 5px 9px; border-radius: 8px; background: var(--ls-accent); }
.kj2__dots { display: inline-flex; }
.kj2__dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .85); margin-inline-start: -7px; }
.kj2__quote { display: grid; gap: 4px; width: 26px; }
.kj2__quote i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
.kj2__quote u { height: 3px; width: 60%; border-radius: 2px; background: var(--ls-accent); }
.kj2__copy { max-width: 560px; transform: translateY(18px); opacity: 0; transition: transform .7s .2s, opacity .7s .2s; }
.kj2__panel.is-on .kj2__copy { transform: none; opacity: 1; }
.kj2__kick { display: inline-block; margin-bottom: 8px; font-size: 13px; letter-spacing: .04em; color: var(--ls-accent); font-weight: 700; }
.kj2__title { font: 400 clamp(32px, 4.6vw, 54px)/1.1 var(--ls-font-display); color: #fff; margin: 0 0 18px; }
.kj2__row { display: flex; gap: 12px; align-items: baseline; margin: 0 0 12px; color: rgba(255, 255, 255, .88); line-height: 1.7; }
.kj2__row b { flex: none; min-width: 46px; font-size: 12px; padding: 3px 10px; border-radius: 99px; text-align: center; background: rgba(255, 255, 255, .16); color: #fff; }
.kj2__row--us b { background: var(--ls-accent); }
.kj2__fact { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 14px; border-radius: 99px; background: rgba(237, 41, 38, .2); border: 1px solid rgba(237, 41, 38, .5); color: #fff; font-size: 14px; }
.kj2__fact svg { color: #fff; flex: none; }
.kj2__cta { margin-top: 18px; }
/* the rail: a line with six stops that fills as the steps advance */
.kj2__nav { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.kj2__nav::before, .kj2__nav::after { content: ""; position: absolute; top: 19px; height: 3px; border-radius: 3px; inset-inline-start: calc(100% / 12); }
.kj2__nav::before { width: calc(100% - 100% / 6); background: rgba(255, 255, 255, .16); }
.kj2__nav::after { width: calc((100% - 100% / 6) * var(--kj, 0)); background: linear-gradient(90deg, var(--ls-accent), #ff7a5c); }
.kj2__nav li { position: relative; z-index: 1; }
.kj2__tab { all: unset; box-sizing: border-box; width: 100%; display: grid; justify-items: center; gap: 10px; cursor: pointer; color: rgba(255, 255, 255, .55); font-size: 14px; font-weight: 600; text-align: center; transition: color .25s; }
.kj2__tab:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 4px; border-radius: 12px; }
.kj2__node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 17px/1 var(--ls-font-display); font-style: normal; background: #13213a; border: 2px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .7); transition: background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.kj2__tab:hover .kj2__node { border-color: rgba(255, 255, 255, .6); }
.kj2__tab.is-on { color: #fff; }
.kj2__tab.is-on .kj2__node { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; transform: scale(1.18); box-shadow: 0 0 0 7px rgba(237, 41, 38, .22); }
@media (max-width: 759px) {
	.kj2__view { height: clamp(420px, calc(100svh - 215px), 680px); border-radius: 22px; }
	.kj2__pin { top: 80px; gap: 14px; }
	.kj2__row { font-size: 14px; margin-bottom: 8px; }
	.kj2__title { margin-bottom: 12px; }
	.kj2__tab span { display: none; }
	.kj2__tab.is-on span { display: block; position: absolute; top: 50px; white-space: nowrap; }
	.kj2__nav { padding-bottom: 30px; }
	.kj2__big { font-size: 110px; }
	.kj2__stage { height: calc(var(--n) * 55vh + 520px); }
}
@media (prefers-reduced-motion: reduce) {
	.kj2__panel, .kj2__big, .kj2__chip, .kj2__copy, .kj2__nav::after { transition: none; }
	.kj2__img { transform: none; }
}

/* ---------- Kitchens page: hand-off band to the planner (template-parts/kitchen-planner-cta.php) ---------- */
.kpc__grid { display: grid; gap: 36px; align-items: center; }
.kpc { background: var(--ls-bg); }
.kpc__lead { color: var(--ls-text); max-width: 52ch; margin: 14px 0 0; }
.kpc__pts { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.kpc__pts li { display: flex; gap: 10px; align-items: flex-start; color: var(--ls-ink); line-height: 1.6; }
.kpc__pts svg { flex: none; margin-top: 5px; color: var(--ls-accent); }
.kpc__art { background: var(--ls-dark); border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -34px rgba(10, 21, 39, .6); }
.kpc__svg { width: 100%; height: auto; display: block; }
.kpc__room { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .5); stroke-width: 6; }
.kpc__u rect, .kpc__u circle, .kpc__u path { fill: rgba(255, 255, 255, .92); stroke: #0a1527; stroke-width: 1.4; }
.kpc__u path { fill: none; }
.kpc__u { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .12s + .2s); }
.kpc__art.is-in .kpc__u, .kpc__art[data-reveal].is-visible .kpc__u, .no-js .kpc__u { opacity: 1; transform: none; }
.kpc__isl rect { fill: var(--ls-accent); stroke: #0a1527; }
.kpc__isl circle { fill: rgba(255, 255, 255, .9); }
.kpc__fr rect, .kpc__fr { fill: #c9ccd1; }
.kpc__dim { stroke: rgba(255, 255, 255, .5); fill: none; stroke-width: 1.5; }
.kpc__t { fill: rgba(255, 255, 255, .8); font: 12px var(--ls-font-body); }
@media (min-width: 900px) { .kpc__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

/* Home planner → the full planner page */
.lsd-full { display: inline-flex; flex-direction: column; gap: 2px; margin: 4px 0 18px; padding: 10px 16px; border: 1px solid rgba(237, 41, 38, .6); border-radius: 12px; background: rgba(237, 41, 38, .1); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
.lsd-full b { font-size: 14px; font-weight: 700; }
.lsd-full span { font-size: 13px; color: rgba(255, 255, 255, .8); }
.lsd-full:hover { background: rgba(237, 41, 38, .22); transform: translateY(-1px); }

.km__more { display: inline-flex; margin: 4px 0 10px; font-weight: 700; }

/* ---------- Kitchens page: one colour rhythm (body.ls-kitchens) ----------
   navy hero → white intro → grey materials → warm-white planner band → navy journey → white gallery → navy features
   → grey quote strip → white reviews → grey FAQ → closing band. Every navy block uses the same navy and the same red glow. */
.ls-kitchens .has-bp { background: #fff; }
.ls-kitchens .km { background: var(--ls-bg); }
.ls-kitchens .kpc { background: linear-gradient(135deg, #fff 0%, #fdeeed 100%); border-block: 1px solid rgba(237, 41, 38, .12); }
.ls-kitchens .kj2, .ls-kitchens .section--dark { background: radial-gradient(60% 55% at 88% 6%, rgba(237, 41, 38, .2), transparent 70%), radial-gradient(50% 50% at 0 100%, rgba(255, 255, 255, .06), transparent 70%), var(--ls-dark); }
.ls-kitchens .section--tight { background: #fff; }
.ls-kitchens .testi { background: #fff; }
.ls-kitchens .faq { background: var(--ls-bg); }

/* ---------- Safari / iPhone ----------
   iOS zooms the page when a text field below 16px is focused (it never zooms back by itself): fields are 16px on touch screens. */
@media (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px !important; }
}

/* ---------- Kitchens hero (KICHENS.docx): feature icons, portrait films ---------- */
.phero__feat { display: flex; flex-wrap: wrap; gap: 14px 30px; list-style: none; margin: 22px 0 6px; padding: 0; }
.phero__feat li { display: grid; justify-items: center; gap: 8px; min-width: 88px; padding-inline: 4px; font-weight: 600; font-size: 14px; color: #fff; text-align: center; }
.phero__feat li + li { border-inline-start: 1px solid rgba(255, 255, 255, .22); padding-inline-start: 28px; }
.phero__feat svg { color: var(--ls-accent); }
.khs__layer video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 599px) { .phero__feat { gap: 10px 14px; } .phero__feat li { min-width: 74px; font-size: 12.5px; } .phero__feat li + li { padding-inline-start: 14px; } }

/* ---------- Kitchens page, first block + ideas strip (KICHENS.docx) ---------- */
.kin__grid { display: grid; gap: 36px; align-items: center; }
.kin__copy p { font-size: 17px; line-height: 1.95; }
.kin__tag, .masonry__item[data-idea]::after { position: absolute; top: 12px; inset-inline-start: 12px; padding: 5px 12px; border-radius: 99px; background: rgba(10, 21, 39, .78); color: #fff; font-size: 12.5px; font-weight: 600; z-index: 2; }
.masonry__item[data-idea]::after { content: attr(data-idea); }
.kin__arrow { position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: var(--ls-ink); box-shadow: 0 10px 24px rgba(10, 21, 39, .3); cursor: pointer; z-index: 3; transition: transform .2s, background .2s, color .2s; }
.kin__arrow:hover { background: var(--ls-accent); color: #fff; transform: scale(1.06); }
.kin__dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.kin__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #c9ced8; cursor: pointer; }
.kin__dots button.is-on { background: var(--ls-accent); }
@media (min-width: 960px) { .kin__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }  }

.kid { background: var(--ls-bg); overflow: hidden; }
.kid__rail { margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kid__row { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; animation: kid-run 90s linear infinite; }
.kid__rail:hover .kid__row { animation-play-state: paused; }
.kid__row li { flex: none; height: 320px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 16px 30px -22px rgba(10, 21, 39, .5); }
.kid__row img { height: 100%; width: auto; display: block; }
@keyframes kid-run { to { transform: translateX(-50%); } }
.kid__ask { margin-top: 26px; }
@media (max-width: 599px) { .kid__row li { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .kid__rail { overflow-x: auto; } .kid__row { animation: none; } .kid__row li[aria-hidden="true"] { display: none; } }

/* ---------- the deck of kitchen photos (cards that flip over each other) ---------- */
.kin__deckwrap { min-width: 0; padding-inline: 4px; }
.kdeck { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 4 / 3.1; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; outline: none; }
.kdeck:active { cursor: grabbing; }
.kdeck:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 8px; border-radius: 22px; }
.kdeck__c { position: absolute; inset: 0 0 8% 0; margin: 0; border-radius: 20px; overflow: hidden; background: #dde1e8; border: 6px solid #fff; box-shadow: 0 26px 46px -26px rgba(10, 21, 39, .6); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .85, .25, 1), filter .5s, opacity .5s; will-change: transform; }
.kdeck__c img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.kdeck__c figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(0deg, rgba(10, 21, 39, .78), transparent); color: #fff; font-weight: 600; font-size: 14.5px; transition: opacity .3s; }
.kdeck__c[data-pos="0"] { z-index: 5; transform: translate(0, 0) rotate(0); }
.kdeck__c[data-pos="1"] { z-index: 4; transform: translate(-5%, 4%) rotate(-5deg) scale(.96); filter: brightness(.9); }
.kdeck__c[data-pos="2"] { z-index: 3; transform: translate(5%, 7%) rotate(6deg) scale(.92); filter: brightness(.8); }
.kdeck__c:not([data-pos="0"]) figcaption { opacity: 0; }
.kdeck__c[data-pos="0"].is-flip { z-index: 9; transform: translate(-72%, -4%) rotate(-18deg) rotateY(-32deg); filter: brightness(.95); }
.kdeck__c.kin__tag-host { }
.kdeck .kin__tag { z-index: 2; }
.kdeck__ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.kin__arrow { position: static; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: var(--ls-ink); box-shadow: 0 10px 24px rgba(10, 21, 39, .25); cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.kin__arrow:hover { background: var(--ls-accent); color: #fff; transform: scale(1.06); }
.kin__arrow--prev svg { transform: scaleX(-1); }
html[dir="ltr"] .kin__arrow--prev svg { transform: none; } html[dir="ltr"] .kin__arrow--next svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .kdeck__c { transition: none; } }

.kin { overflow: hidden; }

/* ---------- Projects page: covers + photo viewer (assets/js/projects.js) ---------- */
.pj__cover { position: relative; display: block; width: calc(100% + 44px); margin: -22px -22px 8px; padding: 0; border: 0; border-radius: 22px 22px 0 0; overflow: hidden; aspect-ratio: 4 / 3; background: #dde1e8; cursor: pointer; }
.pj__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ls-ease, ease); }
.pj:hover .pj__cover img { transform: scale(1.05); }
.pj__n { position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 12px; border-radius: 99px; background: rgba(10, 21, 39, .78); color: #fff; font-size: 12.5px; font-weight: 700; }
.pj__view { position: absolute; inset-inline: 0; bottom: 0; padding: 30px 14px 12px; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(0deg, rgba(10, 21, 39, .8), transparent); opacity: 0; transform: translateY(8px); transition: .3s; text-align: start; }
.pj__cover:hover .pj__view, .pj__cover:focus-visible .pj__view { opacity: 1; transform: none; }
@media (hover: none) { .pj__view { opacity: 1; transform: none; } }
.pjv { border: 0; padding: 0; width: min(96vw, 1100px); max-height: 94vh; border-radius: 20px; overflow: hidden; background: #0a1527; color: #fff; }
.pjv[open] { display: grid; grid-template-rows: auto auto auto; }
.pjv::backdrop { background: rgba(5, 10, 20, .82); }
.pjv__stage { position: relative; background: #05080f; display: grid; place-items: center; min-height: 0; }
.pjv__stage img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; display: block; user-select: none; }
.pjv__count { position: absolute; bottom: 10px; inset-inline-start: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(10, 21, 39, .75); font-size: 12.5px; }
.pjv__nav, .pjv__x { position: absolute; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(10, 21, 39, .75); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s; }
.pjv__nav:hover, .pjv__x:hover { background: var(--ls-accent); }
.pjv__nav[hidden] { display: none; }
.pjv__x { top: 12px; inset-inline-end: 12px; }
.pjv__nav { top: calc(50% - 22px); }
.pjv__nav--p { inset-inline-start: 12px; }
.pjv__nav--n { inset-inline-end: 12px; }
.pjv__info { padding: 16px 22px 8px; display: grid; gap: 4px; }
.pjv__info h3 { margin: 0; font: 400 24px/1.25 var(--ls-font-display); }
.pjv__info p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.7; }
.pjv__loc { color: var(--ls-accent) !important; font-weight: 700; font-size: 13.5px; }
.pjv__info .btn { justify-self: start; margin-top: 8px; }
.pjv__thumbs { display: flex; gap: 8px; padding: 10px 22px 18px; overflow-x: auto; scrollbar-width: thin; }
.pjv__thumbs[hidden] { display: none; }
.pjv__thumbs button { flex: none; width: 88px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; opacity: .6; cursor: pointer; transition: .2s; }
.pjv__thumbs button.is-on { border-color: var(--ls-accent); opacity: 1; }
.pjv__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .pjv[open] { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); grid-template-rows: auto auto; } .pjv__stage { grid-row: 1 / 3; } .pjv__stage img { max-height: 88vh; } .pjv__info { align-content: start; padding-top: 56px; } .pjv__thumbs { grid-column: 2; flex-wrap: wrap; overflow: visible; align-content: start; } }
.pjv__info h3 { color: #fff; }

/* ---- Kitchen materials cards: the two actions are real buttons ---- */
.km__btns { margin-top: auto; padding-top: 12px; display: grid; gap: 10px; }
.km__btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.km__btn--main, .km__btn--main:hover { margin: 0; color: #fff; background: linear-gradient(135deg, #ed2926, #ff5a3c); box-shadow: 0 14px 28px -14px rgba(237, 41, 38, .85); }
.km__btn--main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: kmshine 3.6s 1s infinite; }
@keyframes kmshine { 60%, 100% { transform: translateX(120%); } }
.km__btn--main svg { transition: transform .25s; }
.km__btn--main:hover { transform: translateY(-2px); }
.km__btn--main:hover svg { transform: translateX(-4px); }
.km__btn--wa, .km__btn--wa:hover { padding-top: 0; margin: 0; color: #0a1527; background: rgba(37, 211, 102, .12); border: 1.5px solid #25d366; }
.km__btn--wa:hover { background: #25d366; color: #fff; transform: translateY(-2px); }
.km__btn--wa svg { color: #1faa55; }
.km__btn--wa:hover svg { color: #fff; }
@media (prefers-reduced-motion: reduce) { .km__btn--main::after { animation: none; display: none; } }

/* ---- audit fixes (Oct 2026) ---- */
/* (no overflow rule on html: it breaks position: sticky and the scroll effects) */
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 28px 0 0; list-style: none; border: 0; }
.woocommerce-pagination ul.page-numbers li { float: none; border: 0; margin: 0; }

/* ---- Store front «أقسام المتجر»: smaller, calmer cards (Oct 2026) ---- */
.scats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scat { display: flex; flex-direction: column; padding: 10px; border-radius: 20px; background: var(--ls-surface); box-shadow: 0 1px 0 var(--ls-line), 0 22px 36px -30px rgba(10, 21, 39, .45); transition: transform .3s, box-shadow .3s; }
.scat:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--ls-line), 0 30px 44px -28px rgba(10, 21, 39, .55); }
.scat__cover { height: 168px; border-radius: 14px; clip-path: none; }
.scat__cover::after { background: linear-gradient(180deg, transparent 30%, rgba(10, 21, 39, .78)); }
.scat__title { bottom: 14px; inset-inline-start: 16px; inset-inline-end: 16px; font-size: 21px; display: flex; flex-direction: column; }
.scat__title small { order: 2; margin: 4px 0 0; font-size: 12px; font-weight: 600; }
.scat__children { gap: 6px; margin: 12px 4px 4px; }
.scat__children a { padding: 6px 12px; font-size: 13px; gap: 6px; }
.scat__children a b { min-width: 20px; height: 20px; font-size: 11px; }
@media (max-width: 991px) { .scats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .scats { grid-template-columns: 1fr; gap: 14px; } .scat__cover { height: 130px; } .scat__title { font-size: 19px; } }

/* ---- shop: more products load while scrolling ---- */
.shop-more { display: grid; justify-items: center; gap: 8px; padding: 26px 0 8px; min-height: 56px; color: var(--ls-text); font-size: 14px; }
.shop-more__dots { display: none; gap: 6px; }
.shop-more.is-busy .shop-more__dots { display: inline-flex; }
.shop-more__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ls-accent); animation: shopdot 1s infinite ease-in-out; }
.shop-more__dots i:nth-child(2) { animation-delay: .15s; }
.shop-more__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes shopdot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.shop-more__msg { margin: 0; }
.woo ul.products li.product.is-new { animation: shopin .55s calc(var(--i, 0) * 60ms) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes shopin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .woo ul.products li.product.is-new, .shop-more__dots i { animation: none; } }

/* ---- store pages without a header block: the trail (and the title on lists) sit on the page itself ---- */
.pbar { padding: calc(var(--ls-header-h) + 26px) 0 0; }
.pbar__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ls-text); }
.pbar__crumbs a { color: var(--ls-text); }
.pbar__crumbs a:hover { color: var(--ls-accent); }
.pbar__crumbs span { opacity: .4; }
.pbar__crumbs b { color: var(--ls-ink); font-weight: 700; }
.pbar__title { margin: 14px 0 6px; font: 700 clamp(28px, 3.4vw, 42px)/1.2 var(--ls-font-display); color: var(--ls-ink); }
.pbar__lead { margin: 0 0 6px; max-width: 640px; color: var(--ls-text); line-height: 1.8; }
.single-product #all-products { padding-top: 22px; }
.pbar--list + #all-products { padding-top: 24px; }
.pbar--list + #all-products .woocommerce-products-header, .pbar--list + #all-products h1.page-title { display: none; }

/* ---- store slider: the whole photo on a lightly blurred copy of itself, the text floating over it ---- */
.shero__slide:has(.shero__media--card) { grid-template-columns: 1fr; }
.shero__media--card { position: absolute; inset: 0; height: auto; order: 0; background: #0b1730; }
.shero__media--card::after { z-index: 2; background: linear-gradient(270deg, rgba(8, 16, 32, .9) 0, rgba(8, 16, 32, .74) 30%, rgba(8, 16, 32, 0) 62%); }
[dir="ltr"] .shero__media--card::after { background: linear-gradient(90deg, rgba(8, 16, 32, .9) 0, rgba(8, 16, 32, .74) 30%, rgba(8, 16, 32, 0) 62%); }
.shero__ambient { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(26px) saturate(1.05) brightness(.5); transform: scale(1.04); transition: transform 9s ease-out; }
.shero__slide.is-active .shero__ambient { transform: scale(1.12) translate3d(-1.5%, 0, 0); }
.shero__card { position: absolute; z-index: 1; top: 0; bottom: 0; left: 7%; margin: 0; width: auto; aspect-ratio: var(--ar, .75); border: 0; border-radius: 0; box-shadow: none; transform: translateX(-18px); opacity: 0; transition: transform 1s var(--ls-ease) .1s, opacity .8s ease .1s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
[dir="ltr"] .shero__card { left: auto; right: 7%; transform: translateX(18px); }
.shero__slide.is-active .shero__card { transform: none; opacity: 1; }
.shero__media--card .shero__card img { width: 100%; height: 100%; object-fit: cover; transform: none; transition: none; }
.shero__slide:has(.shero__media--card) .shero__text { grid-column: 1; grid-row: 1; width: min(52%, 560px); justify-self: start; z-index: 3; }
.shero__badge { position: absolute; top: 18px; inset-inline-start: 22%; padding: 7px 13px; border-radius: 99px; background: var(--ls-accent); color: #fff; font: 800 15px/1 var(--ls-font-display); box-shadow: 0 10px 22px -8px rgba(237, 41, 38, .9); }
@media (max-width: 991px) {
	.shero__slide:has(.shero__media--card) { grid-template-columns: 1fr; }
	.shero__media--card { position: relative; height: 300px; display: grid; place-items: center; }
	.shero__card { position: relative; top: auto; bottom: auto; left: auto; right: auto; height: 100%; width: auto; aspect-ratio: 4 / 5; margin: 0 auto; max-width: none; transform: none; -webkit-mask-image: none; mask-image: none; -webkit-mask-composite: initial; mask-composite: initial; }
	.shero__media--card .shero__card img { object-fit: cover; border-radius: 18px; }
	.shero__media--card::after { background: linear-gradient(180deg, rgba(8, 16, 32, 0) 55%, rgba(8, 16, 32, .95)) !important; }
	.shero__slide:has(.shero__media--card) .shero__text { width: auto; justify-self: stretch; grid-row: auto; grid-column: auto; }
	.shero__badge { inset-inline-start: auto; inset-inline-end: 16%; }
}
@media (prefers-reduced-motion: reduce) { .shero__ambient, .shero__card { transition: none; transform: none !important; opacity: 1; } }

.shero__frame:has(.shero__media--card) { min-height: 580px; }
.shero__card { left: 6%; }
[dir=ltr] .shero__card { right: 6%; }
@media (max-width: 991px) { .shero__frame:has(.shero__media--card) { min-height: 0; } }


/* ---------- Team file 1: about header with four drifting pictures ---------- */
.ahero--v2 .ahero__bgs { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0a1527; }
.ahero__bgs span { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: ahbg calc(var(--n) * 8s) linear infinite both; animation-delay: calc(var(--i) * 8s); }
@keyframes ahbg { 0% { opacity: 0; transform: scale(1.03); } 5% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.12); } }
.ahero--v2 .ahero__founder { opacity: .96; filter: grayscale(.25) contrast(1.05); height: 94%; }
.ahero__n { color: var(--ls-accent); font-family: "Cal Sans", var(--ls-font-display); }
.ahero__pts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 22px 0 6px; padding: 0; }
.ahero__pts li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; color: #fff; }
.ahero__pts li svg { grid-row: span 2; color: var(--ls-accent); }
.ahero__pts b { font-size: 16px; }
.ahero__pts span { font-size: 13px; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .ahero__bgs span { animation: none; } .ahero__bgs span:first-child { opacity: 1; } }

/* ---------- Team file 6: the clients header, six pictures one after another ---------- */
.phero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0a1527; }
.phero__slides span { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: phsl calc(var(--n) * 6s) linear infinite both; animation-delay: calc(var(--i) * 6s); }
@keyframes phsl { 0% { opacity: 0; transform: scale(1.02); } 6% { opacity: 1; } 18% { opacity: 1; } 24% { opacity: 0; transform: scale(1.09); } 100% { opacity: 0; transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .phero__slides span { animation: none; } .phero__slides span:first-child { opacity: 1; } }

/* ---------- Team file 4: «من الفكرة إلى الواقع», three films ---------- */
.avid__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
.avid__card { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #0b1730; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -34px rgba(0, 0, 0, .8); transition: transform .4s, box-shadow .4s; }
.avid__card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(237, 41, 38, .6), 0 34px 70px -30px rgba(237, 41, 38, .45); }
.avid__video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.avid__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--ls-accent); background: rgba(10, 21, 39, .55); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 34px rgba(237, 41, 38, .55); transition: transform .3s, opacity .3s; }
.avid__play:hover { transform: scale(1.1); }
.avid__card.is-playing .avid__play { opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .avid__grid { grid-template-columns: repeat(3, 1fr); } .avid__card { aspect-ratio: 3 / 4; } .avid__card:nth-child(2) { transform: translateY(-14px); } .avid__card:nth-child(2):hover { transform: translateY(-20px); } }
@media (prefers-reduced-motion: reduce) { .avid__card { transition: none; } }

/* ---------- Team file 5: the red badge says «خبرة منذ 1998» ---------- */
.about-dark__badge--since { display: grid; align-content: center; justify-items: center; gap: 4px; }
.about-dark__badge--since > span { order: -1; padding-top: 10px; font: 500 14px/1.2 "Tajawal", sans-serif; }
.about-dark__badge--since b { font-size: 40px; display: block; }

/* the clients header: a stronger veil on the text side so the words stay readable over bright pictures */
.phero__slides + .phero__veil { background: linear-gradient(270deg, rgba(8, 17, 33, .86) 0%, rgba(8, 17, 33, .6) 55%, rgba(8, 17, 33, .28) 100%), linear-gradient(0deg, rgba(8, 17, 33, .7), rgba(8, 17, 33, 0) 45%); }
[dir="ltr"] .phero__slides + .phero__veil { background: linear-gradient(90deg, rgba(8, 17, 33, .86) 0%, rgba(8, 17, 33, .6) 55%, rgba(8, 17, 33, .28) 100%), linear-gradient(0deg, rgba(8, 17, 33, .7), rgba(8, 17, 33, 0) 45%); }

/* the walking robot of the home drawing board can step a few px past the board's edge on phones: clip it there, not on the page */
.lsd-board { overflow-x: clip; }

/* the founder: a little lower and a touch lighter */
.ahero--v2 .ahero__founder { bottom: -6%; opacity: .88; }
@media (max-width: 991px) { .ahero--v2 .ahero__founder { bottom: -2%; } }

/* ---------- Projects page: split by line of work (Corian / Compact / Kitchens), then by sector ---------- */
.pjf { margin-top: 30px; display: grid; gap: 18px; justify-items: center; }
.pjf__lines { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--ls-ink, #0a1527); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pjf__lines::-webkit-scrollbar { display: none; }
.pjf__line { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .78); font: 700 15px var(--ls-font-body); white-space: nowrap; cursor: pointer; transition: background .25s, color .25s; }
.pjf__line b { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 12px; }
.pjf__line:hover { color: #fff; }
.pjf__line.is-active { background: #fff; color: var(--ls-ink, #0a1527); }
.pjf__line.is-active b { background: var(--ls-accent); color: #fff; }
.pjf__sectors { margin: 0; }
.pjf__sectors .pill[hidden] { display: none; }
.pj__line { padding: 2px 9px; border-radius: 99px; background: var(--ls-ink, #0a1527); color: #fff; font-size: 11.5px; font-weight: 700; }
.pj__tagline { margin: 0; color: var(--ls-ink, #0a1527); font-size: 14px; font-weight: 600; line-height: 1.6; }
.pj__text[data-clamp] { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pj-empty { text-align: center; color: var(--ls-muted, #5b6574); margin: 30px 0 0; }
@media (max-width: 699px) { .pjf__line { padding: 10px 16px; font-size: 14px; } }

.pjv__stagechip { position: absolute; top: 12px; inset-inline-start: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(10, 21, 39, .82); color: #fff; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pjv__stagechip.is-after { background: var(--ls-accent); }
.pjv__stagechip[hidden] { display: none; }

/* Projects page: links to the three material pages under the works block */
.pjlinks { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 22px 28px; border: 1px solid var(--ls-line); border-radius: 22px; background: var(--ls-surface, #fff); }
.pjlinks__t { margin: 0; font-size: 20px; }
.pjlinks__row { display: flex; gap: 10px; flex-wrap: wrap; }
.pjlinks__a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--ls-ink, #0a1527); color: #fff; font-weight: 700; font-size: 14.5px; transition: background .25s; }
.pjlinks__a:hover { background: var(--ls-accent); }

/* ---------- Home: client stories (template-parts/home/stories.php) ---------- */
.story { position: relative; overflow: clip; background: #f3ebe0; isolation: isolate; }
.story::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--story-bg) center 18% / cover no-repeat; }
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(246, 239, 228, .55), rgba(246, 239, 228, .82) 55%, rgba(246, 239, 228, .94)); }
.story__head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.story__eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--ls-accent); font-weight: 700; font-size: 15px; }
.story__eyebrow::before, .story__eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--ls-accent); }
.story__title { margin: 10px 0 8px; font: 800 clamp(30px, 4.2vw, 52px)/1.25 var(--ls-font-display); color: var(--ls-ink, #0a1527); }
.story__title em { color: var(--ls-accent); font-style: normal; }
.story__head p { margin: 0; color: #3b4658; font-size: 17px; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.story__col { display: grid; gap: 22px; }
.story__q { position: relative; margin: 0; padding: 20px 20px 18px; border-radius: 22px; background: rgba(255, 255, 255, .88); box-shadow: 0 18px 40px -22px rgba(60, 40, 10, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; gap: 14px; align-items: flex-start; }
.story__tag { position: absolute; top: -13px; inset-inline-start: 24px; padding: 4px 16px; border-radius: 99px; background: var(--ls-ink, #0a1527); color: #fff; font-size: 13px; font-weight: 700; }
.story__tag--dressing, .story__tag--corian { background: var(--ls-accent); }
.story__qi { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #efe6d6; color: #6b5a40; }
.story__qb { min-width: 0; }
.story__stars { display: inline-flex; gap: 2px; color: #f3a21a; font-style: normal; }
.story__stars svg { fill: currentColor; }
.story__q blockquote { margin: 6px 0 8px; font-size: 15px; line-height: 1.8; color: #1b2438; }
.story__q figcaption { font-weight: 700; font-size: 14.5px; color: var(--ls-ink, #0a1527); }
.story__film { position: relative; display: block; width: 100%; padding: 0; border: 6px solid rgba(255, 255, 255, .9); border-radius: 30px; overflow: hidden; background: #000; aspect-ratio: 16 / 10; cursor: pointer; box-shadow: 0 30px 60px -28px rgba(60, 40, 10, .55); }
.story__film img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ls-ease, ease); }
.story__film:hover img { transform: scale(1.05); }
.story__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 70, 50, .86); color: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .35); transition: transform .3s; }
.story__film:hover .story__play { transform: scale(1.1); }
.story__cap { margin: 18px 0 10px; text-align: center; font-weight: 700; color: var(--ls-ink, #0a1527); }
.story__cap span { display: inline-flex; align-items: center; gap: 12px; }
.story__cap span::before, .story__cap span::after { content: ""; width: 36px; height: 1px; background: rgba(10, 21, 39, .4); }
.story__ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.story__ph span { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 24px -14px rgba(60, 40, 10, .5); }
.story__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story__cta { text-align: center; margin-top: 34px; }
.story__cta p { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--ls-ink, #0a1527); }
@media (max-width: 1023px) {
	.story__grid { grid-template-columns: 1fr; }
	.story__mid { order: -1; }
	.story__col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
}
@media (max-width: 639px) { .story__col { grid-template-columns: 1fr; } .story__q { padding: 18px 16px; } .story__play { width: 62px; height: 62px; } }

/* phones: text links and small buttons were 15-28px tall, too small for a thumb (44px is the comfortable minimum) */
@media (max-width: 899px) {
	.link-arrow, .link-line, .cr-brand__go, .mt-brand__ask, .nav__phone, .cx-cert__pdf { display: inline-flex; align-items: center; min-height: 44px; }
	.cx-cert__pdf { padding-inline: 10px; }
	.site-header__logo { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Projects block, refinement of the first design: photo-led, lighter cards, 4 columns, load more ---------- */
.pj { padding: 14px 14px 18px; gap: 6px; border-radius: 20px; }
.pj__cover { width: calc(100% + 28px); margin: -14px -14px 8px; aspect-ratio: 3 / 2; border-radius: 20px 20px 0 0; }
.pj__top { gap: 8px; }
.pj__ico { width: 32px; height: 32px; }
.pj__ico svg { width: 17px; height: 17px; }
.pj__sector { font-size: 12.5px; }
.pj__tag { padding: 2px 9px; font-size: 11px; }
.pj__name { margin: 2px 0 0; font-size: 18px; }
.pj__tagline { display: none; }
.pj__text, .pj__text[data-clamp] { font-size: 13.5px; line-height: 1.75; -webkit-line-clamp: 2; }
.pj-grid { gap: 16px; }
@media (min-width: 1200px) { .pj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pjf__sectors { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; padding-bottom: 6px; scrollbar-width: none; }
.pjf__sectors::-webkit-scrollbar { display: none; }
.pjf__sectors .pill { flex: none; font-size: 13px; padding: 7px 16px; }
@media (min-width: 1100px) { .pjf__sectors { justify-content: center; } }
.pj-more { text-align: center; margin: 28px 0 0; }
.pj-more[hidden] { display: none; }
.pj-more__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 10px 0 26px; padding-inline: 26px 10px; border: 1.5px solid var(--ls-ink); border-radius: 999px; background: transparent; color: var(--ls-ink); font: 600 15px/1 var(--ls-font-display); transition: background-color .35s var(--ls-ease), color .35s var(--ls-ease); }
.pj-more__btn b { min-width: 34px; padding: 6px 8px; border-radius: 99px; background: var(--ls-accent); color: #fff; font: 700 13px/1 "Manrope", sans-serif; }
.pj-more__btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ls-ink); color: #fff; transition: transform .35s var(--ls-ease), background-color .35s; }
.pj-more__btn:hover { background: var(--ls-ink); color: #fff; }
.pj-more__btn:hover i { background: var(--ls-accent); transform: translateY(3px); }
.pj-more__btn:focus-visible { outline: 2px solid var(--ls-accent); outline-offset: 4px; }

/* Journey stage: the film of the open step is the background of the whole block on desktop (edge to edge, as tall as the screen
   allows, the copy sits over it on the content line); phones keep the tall card */
@media (min-width: 900px) {
	.kj2__view { width: calc(100vw * var(--z)); margin-inline-start: calc(50% - 50vw * var(--z)); height: calc(100vh * var(--z) - 205px); min-height: 440px; max-height: 920px; border-radius: 0; box-shadow: none; }
	.kj2__panel { padding-inline: max(clamp(20px, 3.4vw, 46px), calc((100% - 1200px) / 2)); }
	.kj2__big { inset-inline-end: max(clamp(14px, 3vw, 40px), calc((100% - 1200px) / 2)); }
	.kj2__chip { inset-inline-start: max(clamp(14px, 3vw, 40px), calc((100% - 1200px) / 2)); }
	.kj2__photo::after { background: linear-gradient(0deg, rgba(8, 16, 30, .9) 4%, rgba(8, 16, 30, .45) 42%, rgba(8, 16, 30, .12) 100%); }
}
.kj2__img { background: #0a1527; }

/* ---------- Dressing page (DRESSING proposal): cycle, types, everything in its place, materials ---------- */
.dressing-page .drx-cycle__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.drx-cycle__ring { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.drx-cycle__c { position: absolute; width: 50%; margin: 0; aspect-ratio: 1; border-radius: 50%; padding: 5px; background: #fff; box-shadow: 0 22px 50px -18px rgba(60, 40, 10, .45); }
.drx-cycle__c img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.drx-cycle__c b { position: absolute; top: 4%; inset-inline-start: 4%; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ls-accent); color: #fff; font: 800 17px/1 var(--ls-font-body); box-shadow: 0 6px 14px rgba(237, 41, 38, .4); }
.drx-cycle__c--1 { top: 0; inset-inline-end: 0; }
.drx-cycle__c--2 { top: 0; inset-inline-start: 0; }
.drx-cycle__c--3 { bottom: 0; inset-inline-start: 0; }
.drx-cycle__c--4 { bottom: 0; inset-inline-end: 0; }
.drx-cycle__arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.drx-cycle__copy p { font-size: 17px; line-height: 1.95; color: var(--ls-text); }
.drx-cycle__copy a:not(.btn-pill):not(.link-line):not(.drx-btn) { color: var(--ls-accent); text-decoration: underline; text-underline-offset: 4px; }
.drx-types__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.drx-type { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(10, 21, 39, .35); transition: transform .35s, box-shadow .35s; }
.drx-type:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -28px rgba(10, 21, 39, .45); }
.drx-type img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.drx-type h3 { margin: 18px 22px 10px; font-size: 22px; }
.drx-type ul { list-style: none; margin: 0; padding: 0 22px 22px; display: grid; gap: 10px; }
.drx-type li { display: flex; align-items: center; gap: 10px; color: var(--ls-text); font-size: 15.5px; }
.drx-type li svg { color: var(--ls-accent); flex: none; }
.drx-types__cta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.dressing-page .drx-place { position: relative; padding-top: clamp(60px, 7vw, 100px); background: #14100c var(--drx-bg) center top / cover no-repeat; isolation: isolate; }
.drx-place::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 10, 6, .55), rgba(14, 10, 6, .78)); }
.drx-place__head { text-align: center; color: #fff; padding-bottom: 54px; }
.drx-place__head h2 { margin: 0; font: 800 clamp(34px, 5vw, 62px)/1.2 var(--ls-font-display); color: #fff; }
.drx-place__head h2 em { color: var(--ls-accent); font-style: normal; display: block; }
.drx-place__head p { margin: 14px auto 0; max-width: 560px; font-size: 18px; color: rgba(255, 255, 255, .86); }
.drx-place__band { background: #f4f0ea; border-radius: 50% 50% 0 0 / 56px 56px 0 0; padding: 38px 0 54px; }
.drx-place__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; counter-reset: p; }
.drx-place__list li { text-align: center; position: relative; }
.drx-place__n { display: block; color: var(--ls-accent); font: 800 20px/1 var(--ls-font-display); margin-bottom: 10px; }
.drx-place__list img { width: min(100%, 140px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 14px 30px -14px rgba(60, 40, 10, .5); display: block; margin: 0 auto 14px; }
.drx-place__list li:not(:last-child)::after { content: ""; position: absolute; top: 56px; inset-inline-end: -12px; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-accent); }
.drx-place__list h3 { margin: 0 0 6px; font-size: 18px; }
.drx-place__list p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.8; color: #4a5568; }
.drx-place__list li::before { content: ""; position: absolute; bottom: -4px; left: 50%; width: 30px; height: 2px; margin-left: -15px; background: var(--ls-accent); }
.drx-mats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.drx-mat { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--ls-line); transition: transform .3s, box-shadow .3s; color: inherit; }
.drx-mat:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -26px rgba(10, 21, 39, .4); }
.drx-mat img { width: 100%; height: auto; border-radius: 14px; display: block; }
.drx-mat h3 { margin: 6px 4px 0; font-size: 19px; }
.drx-mat p { margin: 0 4px; font-size: 14px; color: var(--ls-muted, #5b6574); }
.drx-mat span { margin: 4px 4px 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ls-accent); font-weight: 700; font-size: 14px; }
@media (max-width: 1023px) {
	.dressing-page .drx-cycle__grid { grid-template-columns: 1fr; }
	.drx-place__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
	.drx-place__list li::after { display: none; }
	.drx-mats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.drx-types__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: calc(var(--ls-gutter, 16px) * -1); padding-inline: var(--ls-gutter, 16px); scrollbar-width: none; }
	.drx-types__row::-webkit-scrollbar { display: none; }
	.drx-type { flex: 0 0 82%; scroll-snap-align: center; }
	.drx-place__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.drx-place__band { border-radius: 40px 40px 0 0; }
	.drx-mats__grid { grid-template-columns: 1fr; }
	.drx-cycle__c b { width: 32px; height: 32px; font-size: 15px; }
}

/* Dressing page rhythm: the same section padding as the rest of the site and the same light / white alternation (grey, white, dark photo,
   white, grey, white, grey, white), so the gaps between blocks are equal */
.dressing-page .drx-cycle, .dressing-page .drx-mats, .dressing-page .dr-trust, .dressing-page .faq { background: #fff; }
.dressing-page .drx-types, .dressing-page .dr-gallery { background: var(--ls-surface-2, #f5f6f8); }
.dressing-page .drx-place { padding-top: clamp(80px, 9vw, 130px); }
.dressing-page .drx-place__head { padding-bottom: clamp(36px, 4vw, 54px); }
.dressing-page .drx-place__band { padding-block: clamp(36px, 4vw, 50px) clamp(70px, 8vw, 110px); }
.dressing-page .dr-process .shead { margin-bottom: clamp(36px, 4vw, 56px); }

/* "Everything in its place": the photo is mirrored so the woman looks toward the text; she stands on the left, the text on the right */
.dressing-page .drx-place { background-size: 135% auto; background-position: 100% 34%; }
.dressing-page .drx-place::before { background: linear-gradient(270deg, rgba(14, 10, 6, .82) 0%, rgba(14, 10, 6, .55) 42%, rgba(14, 10, 6, .1) 100%); }
.dressing-page .drx-place__head { text-align: start; width: min(46%, 540px); margin-inline-start: 0; padding-bottom: clamp(60px, 8vw, 120px); }
.dressing-page .drx-place__head p { margin-inline: 0; }
@media (max-width: 899px) {
	.dressing-page .drx-place { background-size: cover; background-position: 38% 20%; }
	.dressing-page .drx-place::before { background: linear-gradient(180deg, rgba(14, 10, 6, .62), rgba(14, 10, 6, .45) 55%, rgba(14, 10, 6, .2)); }
	.dressing-page .drx-place__head { width: 100%; text-align: center; padding-bottom: 150px; }
	.dressing-page .drx-place__head p { margin-inline: auto; }
}
/* phones: the photo sits at the top (she is visible), the title and sentence come under her, then the six items */
@media (max-width: 899px) {
	.dressing-page .drx-place { background-size: auto 560px; background-position: 30% 0; background-repeat: no-repeat; padding-top: 0; }
	.dressing-page .drx-place::before { background: linear-gradient(180deg, rgba(14, 10, 6, 0) 0, rgba(14, 10, 6, .1) 300px, rgba(14, 10, 6, .82) 450px, #14100c 558px); }
	.dressing-page .drx-place__head { padding-top: 400px; padding-bottom: 46px; text-align: center; }
}

/* Dressing page buttons: WhatsApp (navy, green icon) and Star AI (white with a red-orange gradient edge) beside the red main pill */
.dressing-page .drx-cycle__copy .btn-row, .dressing-page .drx-types__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.drx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font: 700 15px/1 var(--ls-font-body); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ls-ease, ease), box-shadow .25s, background .25s, color .25s; }
.drx-btn:hover { transform: translateY(-3px); }
.drx-btn--wa { background: var(--ls-ink, #0a1527); color: #fff; box-shadow: 0 14px 28px -14px rgba(10, 21, 39, .7); }
.drx-btn--wa svg { color: #25d366; flex: none; }
.drx-btn--wa:hover { background: #17294a; box-shadow: 0 18px 32px -14px rgba(10, 21, 39, .8); color: #fff; }
.drx-btn--ai { color: var(--ls-ink, #0a1527); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ed2926, #ff9a5c) border-box; box-shadow: 0 14px 28px -16px rgba(237, 41, 38, .55); }
.drx-btn--ai .lsai-star { flex: none; }
.drx-btn--ai:hover { background: linear-gradient(135deg, #ed2926, #ff7a45) padding-box, linear-gradient(135deg, #ed2926, #ff9a5c) border-box; color: #fff; box-shadow: 0 18px 32px -14px rgba(237, 41, 38, .7); }
.drx-btn--ai:hover .lsai-star { filter: brightness(0) invert(1); }
@media (max-width: 599px) { .dressing-page .drx-cycle__copy .btn-row > *, .dressing-page .drx-types__cta > * { flex: 1 1 100%; } .drx-btn { width: 100%; } }

.dressing-page .km { background: #fff; }

/* closing "request a quote" band: less empty space under the buttons, and a softer footer shadow so it no longer greys out the text */
.cta-band { padding-block: clamp(64px, 6.5vw, 100px) clamp(44px, 4vw, 64px); }
.has-endcap .site-footer { box-shadow: 0 -12px 34px rgba(3, 8, 18, .16); }

/* ---------- About: mission / vision / values (mvx2) ---------- */
.mvx2__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; margin-top: clamp(28px, 4vw, 52px); }
.mvx2__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: center; }
.mvx2__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 26px); padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 21, 39, .06), 0 24px 50px -34px rgba(10, 21, 39, .35); transition: transform .4s var(--ls-ease), box-shadow .4s; }
.mvx2__card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(237, 41, 38, .35), 0 30px 56px -30px rgba(237, 41, 38, .3); }
.mvx2__ico { display: grid; place-items: center; flex: none; width: clamp(72px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; background: rgba(237, 41, 38, .1); color: var(--ls-accent); }
.mvx2__card.is-dark .mvx2__ico { background: #e8ebf0; color: var(--ls-ink); }
.mvx2__txt h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 800 clamp(24px, 2.2vw, 32px)/1.2 var(--ls-font-display); color: var(--ls-ink); }
.mvx2__txt h3::after { content: ""; width: 34px; height: 2px; background: var(--ls-accent); }
.mvx2__txt p { margin: 0; font-size: 15.5px; line-height: 1.9; color: #4a5160; }
.mvx2__n { align-self: stretch; display: grid; place-items: center; padding-inline-start: clamp(14px, 2vw, 26px); border-inline-start: 1px solid var(--ls-line); font: 700 clamp(30px, 3vw, 44px)/1 "Golos Text", sans-serif; color: #d2d6dd; }
.mvx2__photo { position: relative; margin: 0; min-height: clamp(380px, 38vw, 560px); overflow: hidden; border-radius: 26px; background: #0a1527; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.mvx2__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mvx2__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 13, 26, .78), rgba(6, 13, 26, 0) 55%), linear-gradient(to bottom, rgba(6, 13, 26, .5), rgba(6, 13, 26, 0) 30%); }
.mvx2__photo figcaption { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: clamp(20px, 2.4vw, 34px); color: #fff; }
.mvx2__photo small { font: 700 12px/1.9 "Golos Text", sans-serif; letter-spacing: .28em; }
.mvx2__photo small i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; background: var(--ls-accent); transform: rotate(45deg); }
.mvx2__photo small span { font-weight: 500; opacity: .75; letter-spacing: .26em; }
.mvx2__photo q { quotes: none; position: relative; max-width: 300px; padding: 22px 26px 26px; border-radius: 18px; background: rgba(8, 16, 30, .72); backdrop-filter: blur(8px); font: 700 clamp(20px, 1.9vw, 26px)/1.5 var(--ls-font-display); }
.mvx2__photo q::before { content: "\201D"; display: block; margin-bottom: 4px; font: 900 56px/.6 Georgia, serif; color: var(--ls-accent); }
.mvx2__photo q::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; background: var(--ls-accent); }
@media (min-width: 992px) { .mvx2__photo { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); } [dir="ltr"] .mvx2__photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%); } }
@media (max-width: 991px) { .mvx2__grid { grid-template-columns: 1fr; } .mvx2__photo { min-height: 360px; order: -1; } }
@media (max-width: 600px) { .mvx2__card { grid-template-columns: auto minmax(0, 1fr); } .mvx2__n { display: none; } .mvx2__ico { width: 62px; } .mvx2__ico svg { width: 32px; height: 32px; } }

/* ---------- About: «رحلة التصنيع» (mfj) ---------- */
.mfj { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 7vw, 110px); background: #060d1a; color: #fff; }
.mfj__bg { position: absolute; inset: 0; z-index: -2; }
.mfj__bg img { width: 100%; height: 100%; object-fit: cover; }
.mfj::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6, 13, 26, .55), rgba(6, 13, 26, .78)); }
.mfj__head { max-width: 860px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.mfj__title { margin: 0 0 18px; font: 800 clamp(36px, 4.6vw, 68px)/1.2 var(--ls-font-display); color: #fff; }
.mfj__title em { font-style: normal; color: var(--ls-accent); }
.mfj__lead { margin: 0; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.9; color: rgba(255, 255, 255, .82); }
.mfj__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mfj__grid { grid-template-columns: repeat(3, 1fr); } }
.mfj__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: rgba(10, 21, 39, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -34px rgba(0, 0, 0, .8); backdrop-filter: blur(6px); }
.mfj__media { position: relative; aspect-ratio: 16 / 10; background: #0b1730; }
.mfj__video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.mfj__n { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 9px 14px 7px; border-radius: 10px; background: rgba(8, 16, 30, .85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); font: 700 20px/1 "Golos Text", sans-serif; border-bottom: 3px solid var(--ls-accent); }
.mfj__play { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--ls-accent); background: rgba(10, 21, 39, .55); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 34px rgba(237, 41, 38, .55); transition: transform .3s, opacity .3s; }
.mfj__play:hover { transform: scale(1.1); }
.mfj__card.is-playing .mfj__play { opacity: 0; pointer-events: none; }
.mfj__body { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 2vw, 26px); }
.mfj__ico { flex: none; display: grid; place-items: center; width: 64px; padding-inline-end: 18px; border-inline-end: 2px solid var(--ls-accent); color: #fff; opacity: .9; }
.mfj__body h3 { margin: 0 0 6px; font: 800 clamp(20px, 1.8vw, 26px)/1.3 var(--ls-font-display); color: #fff; }
.mfj__body p { margin: 0; font-size: 14.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); }

/* ---------- About: «من خامة إلى تحفة» (craft) ---------- */
.craft { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 52vw, 780px); background: #060d1a; color: #fff; }
.craft__bg { position: absolute; inset: 0; z-index: -2; }
.craft__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.craft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(6, 13, 26, .9) 0%, rgba(6, 13, 26, .55) 40%, rgba(6, 13, 26, 0) 70%); }
[dir="ltr"] .craft::before { background: linear-gradient(90deg, rgba(6, 13, 26, .9) 0%, rgba(6, 13, 26, .55) 40%, rgba(6, 13, 26, 0) 70%); }
.craft__copy { max-width: 560px; padding-block: clamp(48px, 6vw, 90px); }
.craft__title { margin: 0 0 20px; font: 800 clamp(34px, 4.2vw, 64px)/1.3 var(--ls-font-display); color: #fff; }
.craft__title em { font-style: normal; color: var(--ls-accent); }
.craft__lead { margin: 0 0 30px; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.9; color: rgba(255, 255, 255, .85); }
.craft__pts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 0; }
.craft__pts li { display: inline-flex; align-items: center; gap: 10px; padding-inline: 20px; font-size: 15px; color: #fff; }
.craft__pts li + li { border-inline-start: 1px solid rgba(255, 255, 255, .3); }
.craft__pts li:first-child { padding-inline-start: 0; }
.craft__pts svg { color: var(--ls-accent); }
@media (max-width: 767px) {
	.craft { align-items: flex-end; min-height: 620px; }
	.craft::before { background: linear-gradient(0deg, rgba(6, 13, 26, .95) 0%, rgba(6, 13, 26, .7) 50%, rgba(6, 13, 26, 0) 85%); }
	.craft__bg img { object-position: 38% top; }
}
.mfj__grid { direction: ltr; }
.mfj__card { direction: rtl; }
[dir="ltr"] .mfj__card { direction: ltr; }
.mfj__video { position: absolute; inset: 0; }
.mfj__media { overflow: hidden; }
.craft__copy { max-width: 470px; margin-inline-start: 0; }
.craft__title { font-size: clamp(32px, 3.7vw, 58px); }
.craft__lead { max-width: 420px; }
.craft::before { background: linear-gradient(270deg, rgba(6, 13, 26, .92) 0%, rgba(6, 13, 26, .7) 36%, rgba(6, 13, 26, 0) 66%); }
@media (max-width: 767px) { .craft::before { background: linear-gradient(0deg, rgba(6, 13, 26, .95) 0%, rgba(6, 13, 26, .7) 50%, rgba(6, 13, 26, 0) 85%); } .craft__copy { max-width: none; } }
.craft__copy { max-width: 500px; }
.craft__pts { flex-wrap: nowrap; }
.craft__pts li { gap: 8px; padding-inline: 14px; font-size: 14px; white-space: nowrap; }
.craft__pts svg { width: 22px; height: 22px; }
@media (max-width: 480px) { .craft__pts { flex-wrap: wrap; } .craft__pts li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } }
@media (max-width: 767px) {
	.craft { display: block; min-height: 0; }
	.craft::before { display: none; }
	.craft__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
	.craft__bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, #060d1a, rgba(6, 13, 26, 0)); }
	.craft__bg img { object-position: 42% center; }
	.craft__copy { padding-block: 8px 44px; }
	.craft__title { font-size: 34px; }
}

/* ---------- About: motion for the new blocks (all off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* craft: the picture settles in slowly, the words arrive one after another, the strengths light up */
	.craft__bg img { transform: scale(1.12); transition: transform 2.6s cubic-bezier(.2, .7, .2, 1); }
	.craft:has(.craft__copy.is-in) .craft__bg img { transform: scale(1); }
	.craft__copy.is-in .craft__title, .craft__copy.is-in .craft__lead, .craft__copy.is-in .craft__pts li { animation: about-rise .9s var(--ls-ease) both; }
	.craft__copy.is-in .craft__lead { animation-delay: .15s; }
	.craft__copy.is-in .craft__pts li:nth-child(1) { animation-delay: .35s; }
	.craft__copy.is-in .craft__pts li:nth-child(2) { animation-delay: .5s; }
	.craft__copy.is-in .craft__pts li:nth-child(3) { animation-delay: .65s; }
	.craft__title em { background: linear-gradient(100deg, var(--ls-accent) 40%, #ff8d8a 50%, var(--ls-accent) 60%) 100% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: about-shine 5s 1.4s ease-in-out infinite; }
	.craft__pts svg { transition: transform .4s; }
	.craft__pts li:hover svg { transform: scale(1.25) rotate(-8deg); }

	/* journey: a slow drift behind the cards, a pulsing ring on the play buttons, a lift on hover */
	.mfj__bg img { animation: about-drift 26s ease-in-out infinite alternate; }
	.mfj__card { transition: transform .45s var(--ls-ease), box-shadow .45s; }
	.mfj__card:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(237, 41, 38, .6), 0 36px 70px -30px rgba(237, 41, 38, .45); }
	.mfj__play::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ls-accent); animation: about-ring 2.4s ease-out infinite; }
	.mfj__card.is-playing .mfj__play::after { animation: none; }
	.mfj__video { transition: transform .8s var(--ls-ease); }
	.mfj__card:hover .mfj__video { transform: scale(1.06); }

	/* mission / vision / values: the picture wipes in, the cards slide in, the icons turn on hover */
	.mvx2__photo img { transform: scale(1.1); transition: transform 2.2s var(--ls-ease); }
	.mvx2__photo.is-in img { transform: scale(1); }
	.mvx2__ico { transition: transform .5s var(--ls-ease), background .3s; }
	.mvx2__card:hover .mvx2__ico { transform: rotate(-10deg) scale(1.08); background: rgba(237, 41, 38, .18); }
	.mvx2__n { transition: color .4s; }
	.mvx2__card:hover .mvx2__n { color: var(--ls-accent); }
}
@keyframes about-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes about-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes about-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
@keyframes about-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }

/* closing band under the footer curtain: tight top/bottom padding, so the empty strip that shows above the rising footer is small */
.has-endcap .cta-band { padding-block: clamp(26px, 2.6vw, 40px) clamp(28px, 2.6vw, 40px); }
.has-endcap .cta-band__title { margin-top: 14px; }
/* the words rise out of the band's box while the footer covers it: clip sideways only (the arches), never up */
.has-endcap .cta-band { overflow-x: clip; overflow-y: visible; }


/* ---------- Store front: three tiles instead of the carousel (template-parts/store/landing.php .sfront) ---------- */
.sfront { padding: calc(var(--ls-header-h) + 30px) 0 36px; background: var(--ls-dark); }
.sfront__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.stile { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: 26px; }
.stile__title { margin: 14px 0 12px; font: 800 clamp(24px, 2.4vw, 38px)/1.3 var(--ls-font-display); }
.stile__copy p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.85; }
.stile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.stile__price { margin-top: 10px; font: 800 26px/1.3 var(--ls-font-display); color: var(--ls-ink); }
.stile__price del { opacity: .5; font-size: 17px; font-weight: 600; margin-inline-start: 8px; }
.stile__price ins { text-decoration: none; color: var(--ls-accent); }
/* featured: a clean light card, the product shown whole on a soft stage */
.stile--feature { grid-column: span 7; grid-row: span 2; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: clamp(22px, 3vw, 44px); background: linear-gradient(135deg, #f7f8fa, #e7eaf0); color: #3e4658; min-height: 440px; }
.stile--feature .stile__title { color: var(--ls-ink); }
.stile__pic { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 280px; border-radius: 22px; background: radial-gradient(70% 70% at 50% 45%, #fff, #dfe3ea); }
.stile__pic img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; padding: 14px; transition: transform .7s var(--ls-ease); }
.stile--feature:hover .stile__pic img { transform: scale(1.05); }
.stile__badge { position: absolute; top: 14px; inset-inline-start: 14px; padding: 7px 13px; border-radius: 99px; background: var(--ls-accent); color: #fff; font: 800 14px/1 "Golos Text", sans-serif; }
/* offers: dark card, a small product picture on the side */
.stile--offer { grid-column: span 5; grid-template-columns: minmax(0, 1fr) clamp(96px, 11vw, 150px); align-items: center; gap: 14px; padding: clamp(20px, 2.4vw, 32px); background: linear-gradient(135deg, #17294a, #0f1d36); color: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.stile--offer .stile__title { color: #fff; font-size: clamp(20px, 1.9vw, 28px); }
.stile--offer .btn { margin-top: 6px; }
.stile__thumb { aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #0b1730; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.stile__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* materials: a photo under a navy veil */
.stile--mat { grid-column: span 5; align-content: end; min-height: 210px; padding: clamp(20px, 2.4vw, 32px); color: rgba(255, 255, 255, .85); background: #0b1730; }
.stile__bg { position: absolute; inset: 0; z-index: -2; }
.stile__bg img { width: 100%; height: 100%; object-fit: cover; }
.stile--mat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 16, 30, .92), rgba(8, 16, 30, .35)); }
.stile--mat .stile__title { color: #fff; font-size: clamp(20px, 1.9vw, 28px); margin-top: 10px; }
.stile--mat .stile__actions { margin-top: 14px; }
.btn--glass { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.btn--glass:hover { background: #fff; color: var(--ls-ink); }
@media (max-width: 991px) {
	.sfront__grid { grid-template-columns: 1fr; }
	.stile--feature, .stile--offer, .stile--mat { grid-column: auto; grid-row: auto; }
	.stile--feature { grid-template-columns: 1fr; min-height: 0; }
	.stile__pic { order: -1; min-height: 240px; }
}
@media (max-width: 480px) { .stile--offer { grid-template-columns: 1fr; } .stile__thumb { max-width: 160px; order: -1; } }