/**
 * WaliTech theme design system
 * All layout/visual styling lives here. style.css keeps only the theme header + _s resets.
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
	--wt-orange: #e0642c;
	--wt-orange-dark: #c9531f;
	--wt-orange-soft: #fbe7dc;
	--wt-ink: #1c1d22;
	--wt-ink-soft: #4a4d57;
	--wt-muted: #7c8089;
	--wt-line: #e7e3de;
	--wt-cream: #f7f4f1;
	--wt-cream-2: #efeae4;
	--wt-white: #ffffff;
	--wt-navy: #1e2431;
	--wt-navy-2: #171c26;
	--wt-brown: #201812;

	--wt-radius: 18px;
	--wt-radius-sm: 12px;
	--wt-radius-lg: 28px;
	--wt-shadow: 0 18px 40px -20px rgba(20, 22, 30, .28);
	--wt-shadow-sm: 0 8px 24px -14px rgba(20, 22, 30, .35);

	--wt-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--wt-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--wt-max: 1200px;
	--wt-gutter: clamp(16px, 4vw, 40px);
}

/* ============================================================
   2. Base
   ============================================================ */
* { box-sizing: border-box; }

body.walitech {
	margin: 0;
	font-family: var(--wt-sans);
	color: var(--wt-ink);
	background: var(--wt-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
}

.walitech h1, .walitech h2, .walitech h3, .walitech h4 {
	font-family: var(--wt-serif);
	color: var(--wt-ink);
	line-height: 1.1;
	font-weight: 600;
	margin: 0 0 .4em;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
}

/* Grid/flex items must be allowed to shrink below their content size,
   otherwise long words overflow horizontally on small screens. */
.wt-hero__grid > *, .wt-serv-grid > *, .wt-cards > *, .wt-duo > *, .wt-contact > *, .wt-single > * { min-width: 0; }

.walitech a { color: var(--wt-orange); text-decoration: none; transition: color .2s; }
.walitech a:hover { color: var(--wt-orange-dark); }
.walitech img { max-width: 100%; height: auto; display: block; }
.walitech p { margin: 0 0 1rem; }

.wt-container { width: 100%; max-width: var(--wt-max); margin-inline: auto; padding-inline: var(--wt-gutter); }
.wt-section { padding-block: clamp(48px, 7vw, 96px); }
.wt-eyebrow {
	font-family: var(--wt-sans);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .72rem;
	font-weight: 600;
	color: var(--wt-muted);
	margin: 0 0 1rem;
}
.wt-accent { color: var(--wt-orange); }
.wt-lead { font-size: 1.05rem; color: var(--wt-ink-soft); max-width: 60ch; }

/* ============================================================
   3. Buttons
   ============================================================ */
.wt-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--wt-sans);
	font-weight: 600;
	font-size: .95rem;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background .2s, color .2s, border-color .2s;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
.wt-btn:hover { transform: translateY(-2px); }
.wt-btn--primary { background: var(--wt-orange); color: #fff; }
.wt-btn--primary:hover { background: var(--wt-orange-dark); color: #fff; }
.wt-btn--dark { background: var(--wt-ink); color: #fff; }
.wt-btn--dark:hover { background: #000; color: #fff; }
.wt-btn--light { background: #fff; color: var(--wt-ink); border-color: var(--wt-line); }
.wt-btn--light:hover { color: var(--wt-orange); }
.wt-btn--ghost { background: transparent; color: var(--wt-ink); border-color: var(--wt-line); }
.wt-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.wt-btn--ghost-light:hover { color: #fff; border-color: #fff; }

/* Higher-specificity overrides: the global `a { color: orange }` rule must not
   recolor button text (it was making white-on-orange buttons invisible). */
.walitech a.wt-btn--primary, .walitech a.wt-btn--dark { color: #fff; }
.walitech a.wt-btn--light, .walitech a.wt-btn--ghost { color: var(--wt-ink); }
.walitech a.wt-btn--light:hover { color: var(--wt-orange); }
.walitech a.wt-btn--ghost-light { color: #fff; }
.walitech a.wt-card__link, .walitech a.wt-post-card__link { color: var(--wt-orange); }
.walitech .wt-card--guarantee a.wt-card__link { color: #fff; }

/* ============================================================
   4. Top bar
   ============================================================ */
.wt-topbar {
	background: var(--wt-orange);
	color: #fff;
	font-size: .82rem;
	text-align: center;
	padding: .55rem var(--wt-gutter);
}
.wt-topbar strong { font-weight: 700; }
.wt-topbar a { color: #fff; text-decoration: underline; font-weight: 600; margin-inline-start: .4rem; }
.wt-topbar a:hover { color: #fff; opacity: .85; }
.wt-topbar .wt-topbar__ico { margin-inline-end: .4rem; }

/* ============================================================
   5. Header / navigation
   ============================================================ */
.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* Must stay ABOVE the mobile drawer backdrop (.wt-nav-backdrop, z-index 110).
	   The drawer (.wt-nav) lives inside this header, so the header's stacking
	   context has to outrank the body-level backdrop or the dark layer paints
	   over the open menu and swallows its clicks. */
	z-index: 120;
	background: rgba(255,255,255,.95);
	backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid var(--wt-line);
}
/* Offset the sticky header below the WordPress admin bar (logged-in users). */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* Prevent sideways scroll without breaking the sticky header (clip keeps the
   vertical axis "visible", so position:sticky keeps working on all devices). */
html, body.walitech { overflow-x: clip; }
@supports not (overflow: clip) {
	html, body.walitech { overflow-x: hidden; }
}
.wt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 74px;
	padding-block: .5rem;
}
.wt-brand { display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.wt-brand img,
.wt-brand .custom-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img { width: 200px; height: auto; max-width: 100%; }
.wt-brand__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--wt-serif); font-weight: 700; font-size: 1.25rem; color: var(--wt-ink); }
.wt-brand__eye {
	width: 34px; height: 34px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--wt-orange) 19% 60%, var(--wt-ink) 61%);
	display: inline-block; flex-shrink: 0;
}
.wt-brand__logo b { color: var(--wt-orange); }

.wt-nav { display: flex; align-items: center; gap: 2rem; }
.wt-nav__close { display: none; } /* desktop: hidden; shown only in the mobile drawer */
.wt-nav__menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.wt-nav__menu a {
	color: var(--wt-ink);
	font-weight: 500;
	font-size: .95rem;
	padding: .4rem 0;
	position: relative;
	white-space: nowrap;
}
.wt-nav__menu a:hover,
.wt-nav__menu .current-menu-item > a,
.wt-nav__menu .current_page_item > a { color: var(--wt-orange); }
.wt-nav__menu .current-menu-item > a::after,
.wt-nav__menu a:hover::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--wt-orange); border-radius: 2px;
}
.wt-nav__menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 210px;
	background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius-sm);
	box-shadow: var(--wt-shadow); padding: .5rem; list-style: none; margin: .6rem 0 0;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.wt-nav__menu li { position: relative; }
.wt-nav__menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.wt-nav__menu .sub-menu a { display: block; padding: .5rem .7rem; border-radius: 8px; }
.wt-nav__menu .sub-menu a:hover { background: var(--wt-cream); }
.wt-nav__menu .sub-menu a::after { display: none; }

.wt-header__actions { display: flex; align-items: center; gap: 1rem; }

/* language switcher */
.wt-lang { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; }
.wt-lang a, .wt-lang span { color: var(--wt-muted); padding: .1rem .15rem; }
.wt-lang a:hover { color: var(--wt-orange); }
.wt-lang .is-active { color: var(--wt-ink); }
.wt-lang .sep { color: var(--wt-line); }
.wt-lang--mobile { display: none; }
.wt-nav__extra { display: none; } /* mobile drawer only */
@media (max-width: 860px) {
	.wt-lang--desktop { display: none; }
}

.menu-toggle {
	display: none;
	background: transparent; border: 1px solid var(--wt-line); border-radius: 10px;
	width: 44px; height: 42px; cursor: pointer; align-items: center; justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
	content: ""; display: block; width: 20px; height: 2px; background: var(--wt-ink); position: relative; transition: .2s;
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ============================================================
   6. Footer
   ============================================================ */
.site-footer {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	color: #cfd3db;
	border-top: 3px solid var(--wt-orange);
	background: radial-gradient(120% 130% at 80% 0%, #26303f 0%, var(--wt-navy) 50%, var(--wt-navy-2) 100%);
}
/* Signature grid-pattern + orange glow (same language as the hero/expertise). */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 95% 90% at 25% 0%, #000 25%, transparent 76%);
	mask-image: radial-gradient(ellipse 95% 90% at 25% 0%, #000 25%, transparent 76%);
	pointer-events: none;
}
.site-footer::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -140px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(224,100,44,.2), transparent 68%);
	pointer-events: none;
}
.site-footer > .wt-container { position: relative; z-index: 1; }
.wt-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 2.5rem; padding-block: clamp(44px, 6vw, 80px); }

.wt-footer__logo { display: inline-block; margin-bottom: 1.2rem; }
.wt-footer__logo img { width: 200px; max-width: 100%; height: auto; }
.wt-footer__logo.is-default img { filter: brightness(0) invert(1); } /* whiten bundled default on dark footer */
.wt-footer__desc { font-size: .93rem; color: #aeb4c0; max-width: 34ch; margin: 0 0 1rem; line-height: 1.7; }
.wt-footer__meta { font-size: .8rem; color: #838a97; margin: 0 0 1.2rem; }
.wt-footer__social { display: flex; flex-wrap: wrap; gap: .6rem; }
.wt-social__link {
	--brand: var(--wt-orange);
	position: relative;
	width: 42px; height: 42px; border-radius: 12px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: #cfd3db;
	overflow: hidden;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wt-social__link svg { width: 20px; height: 20px; fill: currentColor; position: relative; z-index: 1; transition: transform .25s ease; }
/* Brand-colour wash slides up on hover */
.wt-social__link::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	background: var(--brand);
	transform: translateY(100%);
	transition: transform .25s ease;
}
.wt-social__link:hover,
.wt-social__link:focus-visible {
	color: #fff;
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: 0 12px 22px -10px var(--brand);
}
.wt-social__link:hover::before,
.wt-social__link:focus-visible::before { transform: translateY(0); }
.wt-social__link:hover svg { transform: scale(1.12); }
/* Instagram gets its signature gradient */
.wt-social__link--instagram { --brand: #E4405F; }
.wt-social__link--instagram:hover::before,
.wt-social__link--instagram:focus-visible::before {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.site-footer h4 {
	color: #fff; font-family: var(--wt-sans); font-size: .74rem; letter-spacing: .18em;
	text-transform: uppercase; margin: 0 0 1.2rem; padding-bottom: .7rem; position: relative;
}
.site-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--wt-orange); border-radius: 2px; }

.wt-footer__menu, .wt-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.wt-footer__menu a { color: #b7bdc9; font-size: .93rem; display: inline-flex; align-items: center; gap: .4rem; transition: .2s; }
.wt-footer__menu a::before { content: "\203A"; color: var(--wt-orange); opacity: 0; transform: translateX(-6px); transition: .2s; }
.wt-footer__menu a:hover { color: #fff; }
.wt-footer__menu a:hover::before { opacity: 1; transform: translateX(0); }

.wt-footer__contact li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: #b7bdc9; }
.wt-footer__contact a { color: #b7bdc9; }
.wt-footer__contact a:hover { color: #fff; }
.wt-footer__ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(224,100,44,.15); color: var(--wt-orange); display: grid; place-items: center; font-size: .85rem; }

.wt-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .85rem; color: #838a97; }
.wt-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: #9aa0ab; }
.wt-footer__sep { color: rgba(255,255,255,.28); }
.wt-footer__legalnav .wt-legal-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; margin: 0; padding: 0; }
.wt-footer__legalnav a { color: #b7bdc9; }
.wt-footer__legalnav a:hover { color: var(--wt-orange); }

/* ============================================================
   7. Floating guarantee widget
   ============================================================ */
.wt-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	max-width: 280px; background: var(--wt-orange); color: #fff;
	border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--wt-shadow);
	font-size: .82rem;
}
.wt-float strong { display: block; font-size: .92rem; margin-bottom: .3rem; }
.wt-float a { color: #fff; font-weight: 700; text-decoration: underline; }
.wt-float__close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; opacity: .8; }
.wt-float.is-hidden { display: none; }

/* Floating WhatsApp chat button (left, orange) */
.wt-wa {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 95;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wt-orange);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 26px -8px rgba(224,100,44,.7);
	transition: transform .2s, background .2s;
}
.wt-wa::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wt-orange);
	opacity: .55;
	z-index: -1;
	animation: wt-wa-pulse 2.2s ease-out infinite;
}
.wt-wa:hover { background: var(--wt-orange-dark); color: #fff; transform: translateY(-3px) scale(1.06); }
.wt-wa svg { width: 32px; height: 32px; fill: #fff; }
@keyframes wt-wa-pulse {
	0%   { transform: scale(1); opacity: .55; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 640px) {
	.wt-wa { width: 52px; height: 52px; left: 14px; bottom: 14px; }
}

/* ============================================================
   8. Hero (home)
   ============================================================ */
.wt-hero { position: relative; }
.wt-hero__media { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; height: clamp(280px, 34vw, 440px); }
.wt-hero__media .wt-tile { border-radius: 4px; background-size: cover; background-position: center; }
.wt-hero__col { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
.wt-tile { background-color: #1a2233; background-image: linear-gradient(135deg, #2a3550, #10151f); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.wt-tile--a { background: linear-gradient(135deg, #33507a, #142033); }
.wt-tile--b { background: linear-gradient(135deg, #6b7482, #2c3340); }
.wt-tile--c { background: linear-gradient(135deg, #274060, #0f1826); }

.wt-hero__band { background: var(--wt-cream); }
.wt-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; padding-block: clamp(36px, 5vw, 64px); }
.wt-hero__card { background: #fff; border-radius: var(--wt-radius-lg); padding: clamp(24px, 3vw, 44px); box-shadow: var(--wt-shadow); border-top: 4px solid var(--wt-orange); }
.wt-hero__title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.wt-hero__cta { display: flex; flex-direction: column; gap: .8rem; max-width: 260px; margin-top: 1.6rem; }
.wt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.8rem; }
.wt-stat { background: var(--wt-cream); border-radius: var(--wt-radius-sm); padding: 1rem 1.2rem; }
.wt-stat b { font-family: var(--wt-serif); font-size: 1.5rem; display: block; }
.wt-stat span { font-size: .82rem; color: var(--wt-muted); }
.wt-hero__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.wt-hero__gallery .wt-tile { aspect-ratio: 4/3; border-radius: var(--wt-radius-sm); }

/* ============================================================
   9. Logo marquee
   ============================================================ */
.wt-marquee { border-block: 1px solid var(--wt-line); background: #fff; padding-block: 1.6rem; overflow: hidden; }
.wt-marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: wt-scroll 32s linear infinite; }
.wt-marquee:hover .wt-marquee__track { animation-play-state: paused; }
.wt-marquee__item {
	flex-shrink: 0; font-family: var(--wt-serif); font-weight: 700; font-size: 1.15rem;
	color: #8a8f98; letter-spacing: .02em; filter: grayscale(1); opacity: .75; transition: .2s;
	display: inline-flex; align-items: center; height: 32px;
}
.wt-marquee__item img { max-height: 30px; width: auto; filter: grayscale(1); opacity: .8; }
.wt-marquee__item:hover { opacity: 1; filter: grayscale(0); color: var(--wt-ink); }
@keyframes wt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   10. Cards / generic sections
   ============================================================ */
.wt-section--cream { background: var(--wt-cream); }
.wt-section--navy { background: var(--wt-navy); color: #d5d9e0; }
.wt-section--navy h2, .wt-section--navy h3 { color: #fff; }
.wt-section--brown { background: var(--wt-brown); color: #cbb9ad; }
.wt-section--brown h2, .wt-section--brown h3 { color: #fff; }

.wt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }
.wt-card { background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius); padding: 1.6rem; box-shadow: var(--wt-shadow-sm); transition: transform .2s, box-shadow .2s; }
.wt-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow); }
.wt-card__ico { width: 46px; height: 46px; border-radius: 12px; background: var(--wt-orange-soft); color: var(--wt-orange); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.3rem; }
.wt-card h3 { font-size: 1.15rem; }
.wt-card p { font-size: .92rem; color: var(--wt-ink-soft); margin: 0; }
.wt-card__link { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; font-size: .9rem; margin-top: 1rem; }
.wt-card--guarantee { background: var(--wt-orange); color: #fff; border: none; }
.wt-card--guarantee h3, .wt-card--guarantee .wt-card__badge { color: #fff; }
.wt-card--guarantee p { color: rgba(255,255,255,.9); }
.wt-card--guarantee .wt-card__badge { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.wt-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }

.wt-section__head { max-width: 620px; margin-bottom: 2.4rem; }
.wt-section__head--center { margin-inline: auto; text-align: center; }
.wt-section__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* partner network tabs */
.wt-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.wt-pill { background: #fff; border: 1px solid var(--wt-line); border-radius: 999px; padding: .5rem 1.1rem; font-size: .88rem; font-weight: 500; color: var(--wt-ink-soft); cursor: pointer; }
.wt-pill.is-active, .wt-pill:hover { background: var(--wt-orange); color: #fff; border-color: var(--wt-orange); }

/* approach steps */
.wt-steps { display: grid; gap: 1.4rem; }
.wt-step { display: flex; gap: 1rem; }
.wt-step__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wt-orange); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.wt-step h4 { font-family: var(--wt-sans); font-size: 1rem; margin-bottom: .2rem; }
.wt-step p { font-size: .9rem; color: var(--wt-ink-soft); margin: 0; }

.wt-highlight { background: var(--wt-navy); color: #cfd3db; border-radius: var(--wt-radius-lg); padding: clamp(24px, 3vw, 40px); }
.wt-highlight__box { background: rgba(255,255,255,.05); border-radius: var(--wt-radius); padding: 1.2rem 1.4rem; margin-top: 1rem; }
.wt-highlight__box span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wt-orange); font-weight: 700; }
.wt-highlight__box b { display: block; color: #fff; font-family: var(--wt-serif); font-size: 1.15rem; margin: .2rem 0; }

/* about hero — modern grid-pattern split layout */
.wt-ahero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(52px, 7vw, 96px);
	background: radial-gradient(120% 120% at 82% 0%, #26303f 0%, var(--wt-navy) 55%, var(--wt-navy-2) 100%);
	color: #c9cfd9;
}
.wt-ahero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 90% 85% at 28% 15%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 90% 85% at 28% 15%, #000 30%, transparent 80%);
	pointer-events: none;
}
.wt-ahero::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(224,100,44,.22), transparent 68%);
	pointer-events: none;
}
.wt-ahero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}
.wt-ahero__content h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin: .7rem 0 1rem; }
.wt-ahero__content .wt-lead { color: rgba(255,255,255,.82); }
.wt-ahero__content .wt-btn-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.7rem; }

.wt-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #fff; padding: .45rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.wt-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wt-orange); animation: wt-dot-pulse 1.9s ease-in-out infinite; }
@keyframes wt-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,100,44,.55); } 55% { box-shadow: 0 0 0 7px rgba(224,100,44,0); } }
@media (prefers-reduced-motion: reduce) { .wt-badge__dot { animation: none; box-shadow: 0 0 0 4px rgba(224,100,44,.25); } }

.wt-ahero__media { position: relative; }
.wt-ahero__img { position: relative; z-index: 1; aspect-ratio: 4/3; border-radius: 24px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); }
.wt-ahero__frame { position: absolute; z-index: 0; inset: 20px -20px -20px 20px; border: 2px solid var(--wt-orange); border-radius: 24px; opacity: .7; }
.wt-ahero__chip { position: absolute; z-index: 2; left: -14px; bottom: 26px; background: #fff; color: var(--wt-ink); border-radius: 14px; padding: .7rem 1.1rem; box-shadow: var(--wt-shadow); display: flex; flex-direction: column; line-height: 1.15; }
.wt-ahero__chip b { font-family: var(--wt-serif); font-size: 1.35rem; color: var(--wt-orange); }
.wt-ahero__chip span { font-size: .72rem; color: var(--wt-muted); }
@media (max-width: 880px) {
	.wt-ahero__grid { grid-template-columns: 1fr; }
	.wt-ahero__media { margin-top: 1.4rem; }
	.wt-ahero__frame { inset: 14px -14px -14px 14px; }
}

/* expertise (about) — modern grid-pattern section */
.wt-expertise {
	position: relative;
	background: radial-gradient(120% 100% at 50% 0%, #2b211a 0%, var(--wt-brown) 55%, #160f0a 100%);
	color: #cbb9ad;
	overflow: hidden;
}
.wt-expertise::before {
	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: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 35%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 35%, transparent 78%);
	pointer-events: none;
}
.wt-expertise::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -140px;
	width: 460px;
	height: 460px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(224,100,44,.22), transparent 68%);
	pointer-events: none;
}
.wt-expertise > .wt-container { position: relative; z-index: 1; }
.wt-expertise h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }

.wt-exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.wt-exp-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 20px;
	overflow: hidden;
	transition: transform .28s ease, border-color .28s, box-shadow .28s;
}
.wt-exp-card:hover {
	transform: translateY(-8px);
	border-color: rgba(224,100,44,.55);
	box-shadow: 0 28px 54px -26px rgba(0,0,0,.7);
}
.wt-exp-card__media {
	aspect-ratio: 16/10;
	background-size: cover;
	background-position: center;
	position: relative;
}
.wt-exp-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(22,15,10,.92));
}
.wt-exp-card__num {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--wt-orange);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--wt-serif);
	font-weight: 700;
	box-shadow: 0 8px 18px -6px rgba(224,100,44,.7);
}
.wt-exp-card__body { padding: 1.5rem; position: relative; }
.wt-exp-card__body h3 { color: #fff; font-size: 1.2rem; margin-bottom: .5rem; }
.wt-exp-card__body p { color: #cbb9ad; font-size: .92rem; margin: 0; }
.wt-exp-card__line { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--wt-orange); margin-top: 1.1rem; transition: width .28s ease; }
.wt-exp-card:hover .wt-exp-card__line { width: 64px; }

/* mission / vision (about) */
.wt-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.wt-duo .wt-card { padding: 2rem; }

/* core values */
.wt-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.6rem; }
.wt-value { display: flex; gap: 1rem; }
.wt-value__ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--wt-orange); color: #fff; display: grid; place-items: center; }
.wt-value h4 { font-family: var(--wt-sans); font-size: 1.05rem; margin-bottom: .3rem; }
.wt-value p { font-size: .88rem; color: var(--wt-ink-soft); margin: 0; }

/* big cta band */
.wt-cta-band { background: var(--wt-orange); color: #fff; border-radius: var(--wt-radius-lg); text-align: center; padding: clamp(36px, 5vw, 64px); }
.wt-cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.wt-cta-band .wt-btn-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* stats strip */
.wt-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1.5rem; text-align: center; }
.wt-statstrip b { font-family: var(--wt-serif); font-size: clamp(2rem, 4vw, 2.8rem); display: block; }
.wt-statstrip span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wt-muted); }

/* ============================================================
   11. Page hero (inner pages)
   ============================================================ */
.wt-pagehero { padding-block: clamp(48px, 7vw, 90px); text-align: center; background: var(--wt-cream); }
.wt-pagehero__crumbs { font-size: .82rem; color: var(--wt-muted); margin-bottom: 1rem; }
.wt-pagehero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.wt-pagehero p { max-width: 60ch; margin-inline: auto; color: var(--wt-ink-soft); }
.wt-pagehero--media { position: relative; color: #fff; background: linear-gradient(120deg, #16202f, #0c1119); }
.wt-pagehero--media h1, .wt-pagehero--media .wt-eyebrow { color: #fff; }
.wt-pagehero--media p { color: rgba(255,255,255,.85); }

/* ============================================================
   12. News archive / cards
   ============================================================ */
.wt-newshero { background: var(--wt-navy); color: #d5d9e0; border-radius: var(--wt-radius-lg); padding: clamp(30px, 5vw, 56px); max-width: 720px; }
.wt-newshero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.wt-newshero .wt-btn-row { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }

.wt-newsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.wt-post-card { background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius); overflow: hidden; box-shadow: var(--wt-shadow-sm); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.wt-post-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow); }
.wt-post-card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, #2a3550, #10151f); position: relative; }
.wt-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wt-post-card__cat { position: absolute; top: 12px; left: 12px; background: var(--wt-orange); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.wt-post-card__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.wt-post-card__date { font-size: .8rem; color: var(--wt-muted); }
.wt-post-card h3 { font-size: 1.15rem; margin: 0; }
.wt-post-card h3 a { color: var(--wt-ink); }
.wt-post-card h3 a:hover { color: var(--wt-orange); }
.wt-post-card p { font-size: .9rem; color: var(--wt-ink-soft); margin: 0; }
.wt-post-card__link { margin-top: auto; font-weight: 600; font-size: .88rem; display: inline-flex; gap: .4rem; }

.wt-newscta { background: var(--wt-brown); color: #cbb9ad; border-radius: 0; }
.wt-newscta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.wt-newscta h2 { color: #fff; }

/* ============================================================
   13. Single post + right categories sidebar
   ============================================================ */
.wt-single { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.wt-article__hero { border-radius: var(--wt-radius-lg); overflow: hidden; margin-bottom: 1.8rem; aspect-ratio: 16/8; background: linear-gradient(135deg, #2a3550, #10151f); }
.wt-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.wt-article__meta { display: flex; gap: 1rem; align-items: center; font-size: .85rem; color: var(--wt-muted); margin-bottom: 1rem; flex-wrap: wrap; }
.wt-article__cat { background: var(--wt-orange); color: #fff; padding: .25rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.wt-article h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.wt-article__content { font-size: 1.02rem; color: var(--wt-ink-soft); }
.wt-article__content h2, .wt-article__content h3 { color: var(--wt-ink); margin-top: 1.6em; }
.wt-article__content img { border-radius: var(--wt-radius); margin: 1.4rem 0; }
.wt-article__content blockquote { border-left: 3px solid var(--wt-orange); padding-left: 1.2rem; margin: 1.4rem 0; font-family: var(--wt-serif); font-size: 1.2rem; color: var(--wt-ink); }

.wt-aside { position: sticky; top: 100px; display: grid; gap: 1.4rem; }
.wt-widget { background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius); padding: 1.4rem; }
.wt-widget h3 { font-family: var(--wt-sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wt-muted); margin-bottom: 1rem; }
.wt-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.wt-cat-list a { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border-radius: 10px; color: var(--wt-ink); font-size: .92rem; font-weight: 500; }
.wt-cat-list a:hover, .wt-cat-list .current-cat a { background: var(--wt-cream); color: var(--wt-orange); }
.wt-cat-list .wt-count { background: var(--wt-cream-2); color: var(--wt-muted); font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; }
.wt-widget--cta { background: var(--wt-orange); color: #fff; }
.wt-widget--cta h3, .wt-widget--cta p { color: #fff; }
.wt-widget--cta p { font-size: .9rem; opacity: .92; }

/* ============================================================
   14. Contact
   ============================================================ */
.wt-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.wt-form-card { background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius-lg); padding: clamp(22px, 3vw, 40px); box-shadow: var(--wt-shadow); }
.wt-form-card h2 { font-size: 1.6rem; }
.wt-formnote { border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; font-size: .95rem; }
.wt-formnote--ok { background: var(--wt-orange); color: #fff; }
.wt-formnote--ok strong { color: #fff; }
.wt-formnote--err { background: #fdecec; color: #a12a2a; border: 1px solid #f3c6c6; }
.wt-formnote--err strong { color: #a12a2a; }

.wt-toggle { display: flex; background: var(--wt-cream); border-radius: 999px; padding: 4px; margin: 1.2rem 0; }
.wt-toggle button { flex: 1; border: none; background: transparent; padding: .7rem; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--wt-ink-soft); font-family: var(--wt-sans); }
.wt-toggle button.is-active { background: var(--wt-orange); color: #fff; }
.wt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wt-field { display: flex; flex-direction: column; gap: .35rem; }
.wt-field--full { grid-column: 1 / -1; }
.wt-field label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--wt-ink-soft); }
.wt-field input, .wt-field select, .wt-field textarea {
	border: 1px solid var(--wt-line); border-radius: 10px; padding: .8rem .9rem; font-family: var(--wt-sans); font-size: .95rem; background: var(--wt-cream); color: var(--wt-ink);
}
.wt-field input:focus, .wt-field select:focus, .wt-field textarea:focus { outline: 2px solid var(--wt-orange); border-color: var(--wt-orange); background: #fff; }
.wt-contact__details { display: grid; gap: 1rem; }
.wt-contact__row { display: flex; gap: .9rem; background: #fff; border: 1px solid var(--wt-line); border-radius: var(--wt-radius); padding: 1rem 1.2rem; }
.wt-contact__ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--wt-orange-soft); color: var(--wt-orange); display: grid; place-items: center; }
.wt-contact__row b { display: block; }
.wt-contact__row span { font-size: .88rem; color: var(--wt-ink-soft); }
.wt-contact__map { border-radius: var(--wt-radius); overflow: hidden; border: 1px solid var(--wt-line); min-height: 220px; }
.wt-contact__map iframe { width: 100%; height: 100%; min-height: 220px; border: 0; display: block; }

/* faq accordion */
.wt-faq { max-width: 760px; margin-inline: auto; display: grid; gap: .8rem; }
.wt-faq__item { border: 1px solid var(--wt-line); border-radius: var(--wt-radius-sm); background: #fff; overflow: hidden; }
.wt-faq__q { width: 100%; text-align: left; background: none; border: none; padding: 1.1rem 1.3rem; font-family: var(--wt-sans); font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--wt-ink); }
.wt-faq__q::after { content: "+"; color: var(--wt-orange); font-size: 1.4rem; }
.wt-faq__item.is-open .wt-faq__q::after { content: "\2212"; }
.wt-faq__a { padding: 0 1.3rem; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; color: var(--wt-ink-soft); font-size: .95rem; }
.wt-faq__item.is-open .wt-faq__a { padding: 0 1.3rem 1.2rem; max-height: 400px; }

/* ============================================================
   15. Generic page content (fallback page.php)
   ============================================================ */
.wt-page-content { max-width: 780px; margin-inline: auto; }
.wt-page-content h2 { margin-top: 1.6em; }
.wt-page-content img { border-radius: var(--wt-radius); }

/* pagination */
.wt-pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
.wt-pagination a, .wt-pagination span { padding: .55rem .95rem; border-radius: 10px; border: 1px solid var(--wt-line); font-weight: 600; font-size: .9rem; color: var(--wt-ink); }
.wt-pagination .current { background: var(--wt-orange); color: #fff; border-color: var(--wt-orange); }
.wt-loadmore { text-align: center; margin-top: 2.5rem; }

/* ============================================================
   15a. HOME hero v2 — glass + tech grid + effects
   ============================================================ */
.wt-hero2 {
	position: relative;
	overflow: hidden;
	min-height: min(76vh, 700px); /* ← ارتفاع الهيرو (خفِّض/ارفع هذه القيمة) */
	display: flex;
	align-items: center;
	padding-block: clamp(76px, 10vw, 128px);
	color: #fff;
	background: #0a0e15;
	isolation: isolate;
}
.wt-hero2__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	animation: wt-hero-zoom 20s ease-in-out infinite alternate;
}
.wt-hero2__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(115deg, rgba(8,11,17,.94) 0%, rgba(8,11,17,.78) 42%, rgba(8,11,17,.5) 100%),
		linear-gradient(0deg, rgba(8,11,17,.92) 2%, transparent 55%);
}
.wt-hero2__grid {
	position: absolute;
	inset: -2px;
	z-index: -1;
	background-image:
		linear-gradient(rgba(224,100,44,.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask-image: radial-gradient(ellipse 100% 85% at 28% 42%, #000 38%, transparent 86%);
	mask-image: radial-gradient(ellipse 100% 85% at 28% 42%, #000 38%, transparent 86%);
	animation: wt-grid-drift 24s linear infinite;
}
.wt-hero2__orb {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}
.wt-hero2__orb--a { width: 460px; height: 460px; left: -80px; top: -120px; background: radial-gradient(circle, rgba(224,100,44,.5), transparent 68%); animation: wt-float 9s ease-in-out infinite; }
.wt-hero2__orb--b { width: 400px; height: 400px; right: -60px; bottom: -120px; background: radial-gradient(circle, rgba(60,110,200,.4), transparent 70%); animation: wt-float 11s ease-in-out infinite reverse; }
.wt-hero2__scan {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 180px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(224,100,44,.14), transparent);
	animation: wt-scan 7s ease-in-out infinite;
	pointer-events: none;
}

.wt-hero2__inner { position: relative; z-index: 2; width: 100%; }
.wt-hero2__panel {
	max-width: 660px;
	background: rgba(255,255,255,.07);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 30px;
	padding: clamp(26px, 3.6vw, 52px);
	box-shadow: 0 44px 90px -44px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
	animation: wt-fade-up .8s cubic-bezier(.2,.7,.2,1) both;
}
.wt-badge--glass { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; animation: wt-fade-up .7s .05s cubic-bezier(.2,.7,.2,1) both; }
.wt-hero2 .wt-hero2__title {
	color: #fff;
	font-size: clamp(2.4rem, 5.2vw, 4.1rem);
	line-height: 1.04;
	margin: 1.1rem 0 1rem;
	text-shadow: 0 2px 24px rgba(0,0,0,.45);
	animation: wt-fade-up .8s .12s cubic-bezier(.2,.7,.2,1) both;
}
.wt-hero2__title .wt-accent { position: relative; }
.wt-hero2__text {
	color: rgba(255,255,255,.82);
	font-size: 1.08rem;
	max-width: 52ch;
	margin: 0;
	animation: wt-fade-up .8s .2s cubic-bezier(.2,.7,.2,1) both;
}
.wt-hero2__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; animation: wt-fade-up .8s .28s cubic-bezier(.2,.7,.2,1) both; }
.wt-btn--glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.wt-btn--glass:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }

.wt-hero2__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	max-width: 660px;
	margin-top: 1.6rem;
	animation: wt-fade-up .8s .36s cubic-bezier(.2,.7,.2,1) both;
}
.wt-hstat {
	background: rgba(255,255,255,.07);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 16px;
	padding: .9rem 1rem;
	transition: transform .25s, border-color .25s, background .25s;
}
.wt-hstat:hover { transform: translateY(-4px); border-color: rgba(224,100,44,.6); background: rgba(224,100,44,.12); }
.wt-hstat b { display: block; font-family: var(--wt-serif); font-size: 1.5rem; color: #fff; line-height: 1; }
.wt-hstat span { font-size: .74rem; color: rgba(255,255,255,.6); letter-spacing: .02em; }

@keyframes wt-hero-zoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes wt-grid-drift { from { background-position: 0 0; } to { background-position: 42px 42px; } }
@keyframes wt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
@keyframes wt-scan { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 60%,100% { transform: translateY(560%); opacity: 0; } }
@keyframes wt-fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
	.wt-hero2__stats { grid-template-columns: 1fr 1fr; }
	.wt-hero2 { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wt-hero2__bg, .wt-hero2__grid, .wt-hero2__orb, .wt-hero2__scan,
	.wt-hero2__panel, .wt-hero2__title, .wt-hero2__text, .wt-hero2__cta, .wt-hero2__stats, .wt-badge--glass { animation: none !important; }
}

/* ============================================================
   15b. Reusable signature background + modern components
   ============================================================ */

/* Reusable signature grid-pattern + orange glow (dark sections). */
.wt-gridbg { position: relative; overflow: hidden; }
.wt-gridbg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 92% 85% at 28% 12%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 92% 85% at 28% 12%, #000 30%, transparent 78%);
	pointer-events: none;
	z-index: 0;
}
.wt-gridbg::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -140px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(224,100,44,.2), transparent 68%);
	pointer-events: none;
	z-index: 0;
}
.wt-gridbg > * { position: relative; z-index: 1; }

/* Services hero — dark image + signature pattern */
.wt-serv-hero {
	color: #fff;
	text-align: center;
	padding-block: clamp(60px, 9vw, 130px);
	background:
		linear-gradient(rgba(12,16,22,.72), rgba(12,16,22,.86)),
		var(--wt-serv-img, linear-gradient(120deg, #16202f, #0c1119));
	background-size: cover;
	background-position: center;
}
.wt-serv-hero .wt-badge { margin-bottom: 1rem; }
.wt-serv-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); margin: .4rem 0 1rem; }
.wt-serv-hero p { color: rgba(255,255,255,.85); max-width: 60ch; margin-inline: auto; }
.wt-serv-hero .wt-btn-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* Modern service cards (used on Services + Home) */
.wt-serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.wt-serv-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--wt-line);
	border-radius: 22px;
	padding: 2rem 1.7rem 1.7rem;
	box-shadow: var(--wt-shadow-sm);
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s, border-color .28s;
}
.wt-serv-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wt-orange), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.wt-serv-card:hover { transform: translateY(-8px); box-shadow: var(--wt-shadow); border-color: rgba(224,100,44,.35); }
.wt-serv-card:hover::after { transform: scaleX(1); }
.wt-serv-card__num {
	position: absolute;
	top: 1.3rem;
	right: 1.5rem;
	font-family: var(--wt-serif);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--wt-cream-2);
	line-height: 1;
}
.wt-serv-card__ico {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	background: var(--wt-orange-soft);
	color: var(--wt-orange);
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	margin-bottom: 1.1rem;
}
.wt-serv-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.wt-serv-card p { color: var(--wt-ink-soft); font-size: .93rem; margin: 0 0 1.1rem; }
.wt-serv-card__link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--wt-orange); }
.wt-serv-card__link:hover { gap: .7rem; }

/* Dark stat band (signature) */
.wt-statband { background: radial-gradient(120% 130% at 78% 0%, #26303f 0%, var(--wt-navy) 55%, var(--wt-navy-2) 100%); color: #cfd3db; }
.wt-statband .wt-statstrip b { color: #fff; }
.wt-statband .wt-statstrip span { color: rgba(255,255,255,.55); }
.wt-statband .wt-statstrip > div { position: relative; }
.wt-statband .wt-statstrip > div:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.1); }

/* Premium logo marquee (edge fade + heading) */
.wt-marquee2 { background: var(--wt-white); padding-block: clamp(32px, 5vw, 56px); }
.wt-marquee2__head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.wt-marquee2__head h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.wt-marquee2__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.wt-marquee2__track { display: flex; gap: 4rem; width: max-content; align-items: center; animation: wt-scroll 34s linear infinite; }
.wt-marquee2:hover .wt-marquee2__track { animation-play-state: paused; }
.wt-marquee2__item {
	flex-shrink: 0;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .4rem;
	filter: grayscale(1);
	opacity: .6;
	transition: opacity .25s, filter .25s, transform .25s;
}
.wt-marquee2__item img { max-height: 42px; width: auto; }
.wt-marquee2__item:hover { filter: grayscale(0); opacity: 1; transform: scale(1.06); }

/* Home guarantee band + bottom CTA layout */
.wt-guarantee-band {
	margin-top: 2rem;
	background: linear-gradient(120deg, var(--wt-orange), var(--wt-orange-dark));
	color: #fff;
	border-radius: var(--wt-radius-lg);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	box-shadow: 0 24px 46px -24px rgba(224,100,44,.6);
}
.wt-guarantee-band h3 { color: #fff; margin: .35rem 0; font-size: 1.4rem; }
.wt-guarantee-band p { color: rgba(255,255,255,.92); margin: 0; max-width: 60ch; }
.wt-guarantee-band .wt-card__badge { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #fff; }
.wt-homecta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ============================================================
   16. Responsive
   ============================================================ */
@media (max-width: 980px) {
	.wt-hero__grid, .wt-contact, .wt-single, .wt-duo, .wt-footer__top { grid-template-columns: 1fr; }
	.wt-single { }
	.wt-aside { position: static; grid-template-columns: 1fr 1fr; }
	.wt-hero__media { grid-template-columns: 1fr; height: auto; }
	.wt-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; z-index: 130; }
	/* Once the drawer is open, its own close button (top-left) takes over —
	   hide the header toggle so there aren't two close icons. */
	.wt-nav-open .menu-toggle { display: none; }
	.wt-header__actions .wt-lang--desktop,
	.wt-header__actions .wt-btn--primary { display: none; }

	/* IMPORTANT: backdrop-filter on the header establishes a containing block
	   that traps position:fixed children — the drawer would then anchor to the
	   header (and scroll away) instead of filling the viewport. Drop the blur on
	   mobile so the drawer is truly viewport-fixed and full-height. */
	.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }

	/* Off-canvas drawer (right) */
	.wt-nav {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		height: 100dvh;
		width: min(360px, 88vw);
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem 1.6rem 2rem;
		box-shadow: -26px 0 60px -24px rgba(15,20,30,.42);
		overflow-y: auto;
		z-index: 120;
		opacity: 0;
		visibility: hidden;
		/* Closed drawer must NOT catch taps. opacity:0 alone still receives
		   clicks, and the sub-menu re-enables visibility — so invisible service
		   links used to float over the page (e.g. the contact form) on mobile.
		   pointer-events:none makes the whole closed drawer inert. */
		pointer-events: none;
		transform: translateX(26px);
		transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease, visibility .28s ease;
	}
	.wt-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

	/* In-drawer close button — sticky at the top-left so it stays while scrolling */
	.wt-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		align-self: flex-start;
		margin: 0 0 .4rem -.3rem;
		width: 46px;
		height: 46px;
		border-radius: 12px;
		border: 1px solid var(--wt-line);
		background: #fff;
		color: var(--wt-ink);
		font-size: 1.9rem;
		line-height: 1;
		cursor: pointer;
		z-index: 3;
		transition: border-color .2s ease, color .2s ease, background .2s ease;
	}
	.wt-nav__close:hover { border-color: var(--wt-orange); color: var(--wt-orange); background: var(--wt-cream); }

	.wt-nav__menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.wt-nav__menu > li { width: 100%; position: relative; }
	.wt-nav__menu a { display: block; padding: .95rem .2rem; font-size: 1.06rem; font-weight: 600; border-bottom: 1px solid var(--wt-line); }
	.wt-nav__menu a::after { display: none !important; }
	.wt-nav__menu .current-menu-item > a,
	.wt-nav__menu .current_page_item > a { color: var(--wt-orange); }
	/* Sub-menu is expanded inline in the drawer. It re-enables visibility so it
	   shows when the drawer is open; the closed drawer's pointer-events:none
	   (inherited here, since we don't override it) keeps these links from
	   hijacking taps on the page below while the drawer is closed. */
	.wt-nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 1rem; margin: 0; }

	/* Drawer extras */
	.wt-nav__extra { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
	.wt-lang--mobile { display: inline-flex; align-self: flex-start; gap: .5rem; font-size: 1rem; margin: 0; }
	.wt-nav__quote { justify-content: center; }
	.wt-nav__contact { display: grid; gap: .6rem; }
	.wt-nav__crow { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid var(--wt-line); border-radius: 12px; color: var(--wt-ink); transition: border-color .2s, background .2s; }
	.wt-nav__crow:hover { border-color: var(--wt-orange); background: var(--wt-cream); color: var(--wt-ink); }
	.wt-nav__cico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--wt-orange-soft); color: var(--wt-orange); display: grid; place-items: center; font-size: 1.05rem; }
	.wt-nav__crow b { display: block; font-size: .95rem; line-height: 1.2; }
	.wt-nav__crow small { color: var(--wt-muted); font-size: .84rem; }

	body.wt-nav-open { overflow: hidden; }
	.wt-nav-backdrop { position: fixed; inset: 0; background: rgba(10,14,20,.5); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
	.wt-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (max-width: 640px) {
	.wt-stats, .wt-hero__gallery, .wt-form-grid, .wt-footer__top, .wt-aside { grid-template-columns: 1fr; }
	.wt-newscta__inner { flex-direction: column; align-items: flex-start; }
	.wt-float { left: 12px; right: 12px; max-width: none; }
}

/* ============================================================
   17. Service detail pages (shared layout)
   ============================================================ */
/* Two-column intro: text + image */
.wt-svc-media { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.wt-svc-media__body h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .4rem 0 1rem; }
.wt-svc-media__body .wt-btn { margin-top: 1.6rem; }
.wt-svc-media__media img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; border-radius: var(--wt-radius-lg); box-shadow: var(--wt-shadow); }

/* Checklist with round check badges */
.wt-checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.wt-checklist li { position: relative; padding-left: 2.1rem; color: var(--wt-ink-soft); font-weight: 500; line-height: 1.5; }
.wt-checklist li::before {
	content: "\2713";
	position: absolute; left: 0; top: .05em;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.45rem; height: 1.45rem; border-radius: 50%;
	background: var(--wt-orange-soft); color: var(--wt-orange);
	font-size: .82rem; font-weight: 700;
}
.wt-checklist--light li { color: rgba(255,255,255,.85); }
.wt-checklist--light li::before { background: rgba(255,255,255,.15); color: #fff; }

/* Benefits: dark highlight split */
.wt-svc-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.wt-svc-benefits h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 .8rem; }

@media (max-width: 860px) {
	.wt-svc-media, .wt-svc-benefits { grid-template-columns: 1fr; }
	.wt-svc-media__media { order: -1; }
}