/* ==========================================================================
   Circle Arch – main stylesheet
   Colours come from Customize → Circle Arch → Brand colours (CSS variables).
   ========================================================================== */

@font-face {
	font-family: "Funnel Display";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/funnel-display-latin.woff2") format("woff2");
}

:root {
	--ca-accent: #0E77B8;
	--ca-dark: #393C41;
	--ca-light: #F1F0F6;
	--ca-cream: #F0EBE5;
	--ca-white: #fff;
	--ca-font: "Funnel Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ca-gutter: 15px;
	--ca-header-h: 106px;
	--ca-ease: cubic-bezier(.24, .74, .58, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--ca-light);
	color: var(--ca-dark);
	font-family: var(--ca-font);
	font-size: 16px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s, background-color .25s, opacity .25s; }
a:hover { color: var(--ca-accent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--ca-font); font-weight: 500; color: var(--ca-dark); line-height: 1.1; letter-spacing: -.9px; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 3px; }
.screen-reader-text, .ca-hp {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: 12px 18px; background: var(--ca-accent); color: var(--ca-light);
}
.ca-accent { color: var(--ca-accent); }
.ca-wrap { padding-left: var(--ca-gutter); padding-right: var(--ca-gutter); }
.ca-wrap-narrow { max-width: 1252px; margin-left: auto; margin-right: auto; padding-left: var(--ca-gutter); padding-right: var(--ca-gutter); }

/* Reveal on scroll (only when JS runs, so content is never hidden without it). */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ca-ease), transform .9s var(--ca-ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Square button ---------- */
.ca-square-btn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
	width: 100px; height: 100px; flex: none;
	background: var(--ca-accent); color: var(--ca-dark);
	font-size: 16px; font-weight: 500; line-height: 1; text-align: center;
	border: 0; cursor: pointer; padding: 8px;
	transition: background-color .3s, color .3s;
}
.ca-square-btn span { display: block; }
.ca-square-btn:hover, .ca-square-btn:focus-visible { background: var(--ca-dark); color: var(--ca-light); }

/* ---------- Section heading (blue square + big title) ---------- */
.ca-section-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 30px;
	padding-top: 120px; padding-bottom: 80px;
}
.ca-section-title {
	position: relative; margin: 0; padding-left: 35px;
	font-size: 70px; line-height: 1; font-weight: 500; letter-spacing: -.9px; text-transform: capitalize;
}
.ca-section-title::before {
	content: ""; position: absolute; left: 5px; top: -.12em; width: 25px; height: 25px; background: var(--ca-accent);
}
.ca-section--first .ca-section-head { padding-top: 65px; padding-bottom: 15px; }

/* ==========================================================================
   Header
   ========================================================================== */
.ca-header {
	position: absolute; top: 0; left: 0; right: 0; z-index: 50;
	color: var(--ca-light);
}
body:not(.has-hero) .ca-header { position: relative; background: var(--ca-dark); }
.ca-header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 30px;
	height: 120px; padding: 0 var(--ca-gutter);
}
.ca-logo { display: block; flex: none; }
.ca-logo img { width: 84px; height: auto; max-height: 60px; object-fit: contain; object-position: left center; }
.ca-header .ca-logo:hover { opacity: .85; }

.ca-header.is-stuck {
	position: fixed; background: var(--ca-dark);
	animation: ca-slide-down .6s var(--ca-ease) both;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.ca-header.is-stuck .ca-header-inner { height: var(--ca-header-h); }
.admin-bar .ca-header.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .ca-header.is-stuck { top: 0; } }
@keyframes ca-slide-down { from { transform: translateY(-100%); } to { transform: none; } }
body:not(.has-hero) .ca-header.is-stuck + .ca-header-spacer { height: 120px; }

.ca-header-right { display: flex; align-items: center; gap: 45px; margin-left: auto; }

/* Burger */
.ca-burger {
	position: relative; width: 57px; height: 58px; flex: none;
	background: var(--ca-accent); border: 0; cursor: pointer; padding: 0;
	transition: background-color .3s;
}
.ca-burger:hover { background: color-mix(in srgb, var(--ca-accent) 85%, #000); }
.ca-burger i {
	position: absolute; left: 16px; right: 16px; height: 2px; background: var(--ca-light);
	transition: transform .35s var(--ca-ease), opacity .2s, top .35s var(--ca-ease);
}
.ca-burger i:nth-child(1) { top: 20px; }
.ca-burger i:nth-child(2) { top: 28px; }
.ca-burger i:nth-child(3) { top: 36px; }
.ca-nav-open .ca-burger i:nth-child(1) { top: 28px; transform: rotate(45deg); }
.ca-nav-open .ca-burger i:nth-child(2) { opacity: 0; }
.ca-nav-open .ca-burger i:nth-child(3) { top: 28px; transform: rotate(-45deg); }

/* Menu – desktop: slides in next to the burger, like the original */
.ca-nav { display: flex; align-items: center; }
.ca-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 45px; }
.ca-menu li { position: relative; }
.ca-menu a {
	display: block; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: uppercase;
	color: var(--ca-light); padding: 6px 0; position: relative;
}
.ca-menu a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor;
	transition: right .35s var(--ca-ease);
}
.ca-menu a:hover::after, .ca-menu .current-menu-item > a::after, .ca-menu .current_page_item > a::after { right: 0; }
.ca-menu a:hover { color: var(--ca-light); }
.ca-menu .sub-menu {
	list-style: none; position: absolute; top: 100%; left: -20px; min-width: 220px; margin: 0; padding: 14px 20px;
	background: var(--ca-dark); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s;
}
.ca-menu li:hover > .sub-menu, .ca-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ca-menu .sub-menu a { text-transform: none; padding: 6px 0; }
.ca-nav-cta { display: none; }

/* Language switch: last menu item, shows the other language (AR / EN) */
.ca-menu .ca-menu-lang a { font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .04em; }

@media (min-width: 1100px) {
	.ca-nav { opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .45s var(--ca-ease), transform .45s var(--ca-ease), visibility .45s; }
	.ca-nav-open .ca-nav { opacity: 1; visibility: visible; transform: none; }
}
/* Desktop with a mouse: hovering the burger slides the menu out; it stays open while the pointer is over the links. */
@media (min-width: 1100px) and (hover: hover) {
	.ca-header-right:has(.ca-burger:hover) .ca-nav,
	.ca-nav:hover,
	.ca-nav:focus-within { opacity: 1; visibility: visible; transform: none; }
}

/* Menu – tablet/mobile: full-screen panel */
@media (max-width: 1099px) {
	.ca-header-inner { height: 90px; }
	.ca-header.is-stuck .ca-header-inner { height: 90px; }
	.ca-logo img { width: 62px; }
	.ca-burger { width: 42px; height: 42px; }
	.ca-burger i { left: 11px; right: 11px; }
	.ca-burger i:nth-child(1) { top: 14px; }
	.ca-burger i:nth-child(2) { top: 20px; }
	.ca-burger i:nth-child(3) { top: 26px; }
	.ca-nav-open .ca-burger i:nth-child(1), .ca-nav-open .ca-burger i:nth-child(3) { top: 20px; }
	.ca-burger, .ca-nav-open .ca-header .ca-logo { position: relative; z-index: 2; }
	.ca-nav {
		position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center;
		padding: 110px 30px 40px; background: var(--ca-dark); overflow-y: auto;
		opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
	}
	.ca-nav-open .ca-nav { opacity: 1; visibility: visible; }
	.ca-nav-open { overflow: hidden; }
	.ca-menu { flex-direction: column; align-items: flex-start; gap: 6px; }
	.ca-menu a { font-size: 30px; text-transform: none; letter-spacing: -.5px; }
	.ca-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 18px; background: none; }
	.ca-menu .sub-menu a { font-size: 20px; }
	.ca-nav-cta { display: block; margin-top: 30px; }
	.ca-nav-cta a { display: inline-block; padding: 14px 24px; background: var(--ca-accent); color: var(--ca-dark); font-weight: 500; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ca-hero {
	position: relative; display: flex; align-items: flex-end;
	min-height: 100vh; min-height: 100svh; overflow: hidden;
	background: var(--ca-dark); color: var(--ca-light);
}
.ca-hero--page { min-height: 62vh; min-height: 62svh; }
.ca-hero--small { min-height: 420px; }
.ca-hero-slides, .ca-hero-slide { position: absolute; inset: 0; }
.ca-hero-slide { opacity: 0; transition: opacity 1.05s ease; }
.ca-hero-slide.is-active { opacity: 1; }
.ca-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.ca-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%);
}
.ca-hero-content {
	position: relative; z-index: 2; width: 100%;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
	padding-bottom: 30px;
}
.ca-hero-title {
	margin: 0 0 18px; font-size: 80px; line-height: 1; font-weight: 500; letter-spacing: -.9px;
	text-transform: capitalize; color: var(--ca-light);
}
.ca-hero-sub, .ca-hero-side { margin: 0 0 0 5px; font-size: 20px; font-weight: 500; line-height: 1.62; color: var(--ca-light); }
.ca-hero-side { text-align: right; margin: 0; }
.ca-hero-dots {
	position: absolute; z-index: 3; right: 30px; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 10px;
}
.ca-hero-dots button {
	width: 12px; height: 12px; padding: 0; border: 0; cursor: pointer;
	background: color-mix(in srgb, var(--ca-light) 60%, transparent); transition: background-color .3s;
}
.ca-hero-dots button[aria-current="true"] { background: var(--ca-accent); }

/* ==========================================================================
   Services
   ========================================================================== */
.ca-feature { margin-bottom: 30px; }
.ca-feature img { width: 100%; height: 650px; object-fit: cover; }
.ca-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 77px 30px; }
.ca-service-card {
	position: relative; min-height: 500px; padding: 15px 23px 20px;
	display: flex; flex-direction: column;
	background: radial-gradient(120% 90% at 50% 45%, #fff 45%, color-mix(in srgb, var(--ca-light) 70%, #fff) 100%);
	transition: background-color .45s var(--ca-ease);
	overflow: hidden;
}
.ca-service-card::before {
	content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ca-accent) 85%, var(--ca-light));
	opacity: 0; transition: opacity .45s var(--ca-ease);
}
.ca-service-card > * { position: relative; }
.ca-service-title { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.62; letter-spacing: 0; }
.ca-service-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ca-service-title a:hover { color: inherit; }
.ca-service-body {
	flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
	padding-right: 30px;
	opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ca-ease), transform .45s var(--ca-ease);
}
.ca-service-summary { margin: 10px 0 0; font-size: 19px; line-height: 1.12; text-align: justify; hyphens: auto; }
.ca-service-dot { width: 25px; height: 25px; background: var(--ca-accent); align-self: center; margin-right: -30px; }
.ca-service-scope { margin: 0; font-size: 19px; line-height: 1.12; text-align: center; margin-right: -30px; }
.ca-service-card:hover::before, .ca-service-card:focus-within::before { opacity: 1; }
.ca-service-card:hover .ca-service-body, .ca-service-card:focus-within .ca-service-body { opacity: 1; transform: none; }
.ca-service-card:hover .ca-service-dot, .ca-service-card:focus-within .ca-service-dot { background: color-mix(in srgb, var(--ca-accent) 80%, #000); }
/* Phones/tablets have no hover: always show the text. */
@media (hover: none), (max-width: 767px) {
	.ca-service-card { min-height: 0; }
	.ca-service-body { opacity: 1; transform: none; }
	.ca-service-dot { display: none; }
}

/* ==========================================================================
   Projects
   ========================================================================== */
.ca-carousel { position: relative; }
.ca-carousel-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 3);
	gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 0 var(--ca-gutter); scroll-padding: 0 var(--ca-gutter);
	scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.ca-carousel-track::-webkit-scrollbar { display: none; }
.ca-carousel-track > * { scroll-snap-align: start; }
.ca-carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 50px; }
.ca-carousel-dots button {
	width: 60px; height: 3px; padding: 0; border: 0; cursor: pointer; position: relative;
	background: color-mix(in srgb, var(--ca-dark) 15%, transparent); transition: background-color .3s;
}
.ca-carousel-dots button::before { content: ""; position: absolute; inset: -10px 0; }
.ca-carousel-dots button[aria-current="true"] { background: var(--ca-accent); }

.ca-project-card { display: block; }
.ca-project-media { overflow: hidden; aspect-ratio: 460 / 550; background: color-mix(in srgb, var(--ca-dark) 8%, transparent); }
.ca-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ca-ease); }
.ca-project-card:hover .ca-project-media img { transform: scale(1.05); }
.ca-project-title { margin: 22px 0 0; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.ca-project-meta { margin: 4px 0 0; font-size: 15px; opacity: .7; }
.ca-project-card:hover .ca-project-title { color: var(--ca-accent); }
.ca-projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 15px; padding-top: 100px; }

/* Filter (projects page) */
.ca-filter { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 80px; }
.ca-filter a { padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--ca-dark) 25%, transparent); font-size: 15px; }
.ca-filter a.is-active, .ca-filter a:hover { background: var(--ca-accent); border-color: var(--ca-accent); color: var(--ca-dark); }
.ca-filter + .ca-projects-grid { padding-top: 50px; }

/* ==========================================================================
   Who we are
   ========================================================================== */
.ca-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ca-section--first .ca-values { padding-top: 100px; }
.ca-value-card { position: relative; scroll-margin-top: 140px; }
.ca-value-media { position: relative; overflow: hidden; aspect-ratio: 450 / 650; background: var(--ca-dark); }
.ca-value-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ca-ease), opacity .45s; }
.ca-value-overlay {
	position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(180deg, rgba(57,60,65,0) 0%, color-mix(in srgb, var(--ca-dark) 92%, transparent) 55%);
	color: var(--ca-light); opacity: 0; transition: opacity .45s var(--ca-ease);
}
.ca-value-kicker { font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0 0 14px; color: var(--ca-light); }
.ca-value-text { font-size: 17px; line-height: 1.5; margin: 0 0 14px; }
.ca-value-footer { margin: 0; font-size: 15px; color: var(--ca-cream); border-top: 1px solid rgba(255,255,255,.25); padding-top: 12px; }
.ca-value-card:hover .ca-value-overlay, .ca-value-card:focus-within .ca-value-overlay { opacity: 1; }
.ca-value-card:hover img { transform: scale(1.04); }
.ca-value-title { margin: 20px 0 0; font-size: 22px; font-weight: 500; letter-spacing: 0; }
@media (hover: none), (max-width: 767px) {
	.ca-value-overlay { position: static; opacity: 1; background: none; color: inherit; padding: 16px 0 0; }
	.ca-value-kicker { color: var(--ca-dark); }
	.ca-value-footer { color: inherit; border-color: color-mix(in srgb, var(--ca-dark) 20%, transparent); }
}
.ca-center-btn { display: flex; justify-content: center; padding: 80px var(--ca-gutter) 0; }
.ca-center-btn--flat .ca-square-btn { width: auto; height: auto; padding: 10px 14px; flex-direction: row; gap: .3em; }

/* ==========================================================================
   HSE
   ========================================================================== */
.ca-hse-grid {
	display: grid; grid-template-columns: 534px minmax(0, 675px); gap: 30px;
	margin: 0 var(--ca-gutter); padding: 0 0 15px var(--ca-gutter);
	border-bottom: 1px solid var(--ca-dark);
}
.ca-hse-grid figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ca-hse-heading { font-size: 30px; line-height: 1; margin: 18px 0 22px; text-transform: capitalize; }
.ca-hse-text { font-size: 16px; line-height: 1.62; text-align: justify; color: color-mix(in srgb, var(--ca-dark) 92%, transparent); }
.ca-section--first .ca-hse-grid { margin-top: 100px; }

/* ==========================================================================
   Certificates
   ========================================================================== */
.ca-cert-list { padding-top: 0; }
.ca-cert-row {
	display: block; padding: 0 0 10px; margin-bottom: 30px; color: var(--ca-dark);
	border-bottom: 1px solid var(--ca-dark);
}
.ca-cert-row:hover { color: var(--ca-dark); }
.ca-cert-title { margin: 0 0 18px; font-size: 42px; line-height: 1; transition: color .3s; }
.ca-cert-title span { display: block; }
a.ca-cert-row:hover .ca-cert-title { color: var(--ca-accent); }
.ca-cert-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; }
.ca-cert-meta p { margin: 0; font-size: 20px; }
.ca-cert-badge { font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--ca-accent); white-space: nowrap; }
.ca-section--first .ca-cert-list { padding-top: 100px; }

.ca-cert-docs { padding-top: 100px; }
.ca-doc-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center;
	padding: 40px 0 44px; border-bottom: 1px solid var(--ca-dark);
}
.ca-doc-name { margin: 0 0 22px; font-size: 36px; line-height: 1.1; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.ca-doc-reg { margin: 0; font-size: 22px; font-weight: 300; text-transform: capitalize; }
.ca-doc-code { font-size: 20px; color: var(--ca-accent); line-height: 1.5; white-space: nowrap; }
.ca-doc-scans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-top: 80px; }
.ca-doc-scans a { display: block; background: #fff; padding: 14px; box-shadow: 0 20px 40px rgba(57,60,65,.08); transition: transform .4s var(--ca-ease); }
.ca-doc-scans a:hover { transform: translateY(-6px); }
.ca-doc-scans img { width: 100%; aspect-ratio: 7 / 10; object-fit: cover; }
.ca-doc-scans figcaption { margin-top: 12px; font-size: 15px; text-align: center; }

/* ==========================================================================
   Statement band + bottom CTA
   ========================================================================== */
.ca-statement { margin-top: 100px; padding: 15px var(--ca-gutter); background: color-mix(in srgb, var(--ca-dark) 33.7%, var(--ca-light)); }
.ca-statement-inner { max-width: 811px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ca-statement-text { margin: 0 0 40px; font-size: 40px; line-height: 59px; font-weight: 500; text-align: justify; color: var(--ca-dark); }
.ca-cta { display: flex; justify-content: center; padding: 55px var(--ca-gutter); }

/* ==========================================================================
   Clients
   ========================================================================== */
.ca-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; padding-top: 100px; }
.ca-client {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 30px;
	background: #fff; transition: box-shadow .3s;
}
.ca-client img { max-height: 90px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: .3s; }
.ca-client:hover img { filter: none; opacity: 1; }
.ca-client span { font-size: 18px; font-weight: 500; text-align: center; }

/* ==========================================================================
   Contact
   ========================================================================== */
.ca-contact {
	max-width: 1220px; margin: 0 auto; padding: 100px 20px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch;
}
.ca-contact h2 { margin: 0 0 24px; font-size: 36px; text-transform: capitalize; }
.ca-contact dl { margin: 0; display: grid; gap: 18px; }
.ca-contact dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.ca-contact dd { margin: 4px 0 0; font-size: 20px; }
.ca-map { min-height: 420px; background: color-mix(in srgb, var(--ca-dark) 8%, transparent); }
.ca-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.ca-form-section { max-width: 1220px; margin: 0 auto; padding: 0 20px 100px; }
.ca-form-section h2 { font-size: 36px; margin-bottom: 30px; }
.ca-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.ca-form-grid p { margin: 0 0 22px; }
.ca-form-full { grid-column: 1 / -1; }
.ca-form label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.ca-form input, .ca-form textarea, .search-form input[type="search"] {
	width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--ca-dark); background: transparent;
	font-size: 18px; border-radius: 0; transition: border-color .3s;
}
.ca-form input:focus, .ca-form textarea:focus, .search-form input[type="search"]:focus { outline: none; border-color: var(--ca-accent); }
.ca-form textarea { resize: vertical; min-height: 140px; }
.ca-form-note { padding: 16px 20px; margin-bottom: 30px; border-left: 4px solid var(--ca-accent); background: #fff; }
.ca-form-note.is-error { border-color: #c0392b; }

/* ==========================================================================
   Content (pages, posts, single project/service)
   ========================================================================== */
.ca-content { padding-top: 100px; padding-bottom: 100px; }
.ca-content--tight { padding-top: 60px; padding-bottom: 0; }
.entry-content { font-size: 18px; line-height: 1.7; color: color-mix(in srgb, var(--ca-dark) 92%, transparent); }
.entry-content > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: 1222px; }
.entry-content > .alignfull { max-width: none; margin-left: calc(-1 * var(--ca-gutter)); margin-right: calc(-1 * var(--ca-gutter)); }
.entry-content h2 { font-size: 42px; margin-top: 1.4em; }
.entry-content h3 { font-size: 30px; margin-top: 1.4em; }
.entry-content h4 { font-size: 22px; margin-top: 1.4em; }
.entry-content a { color: var(--ca-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .4em; }
.entry-content blockquote { border-left: 4px solid var(--ca-accent); padding: 4px 0 4px 24px; font-size: 24px; line-height: 1.4; color: var(--ca-dark); }
.entry-content img { margin-left: auto; margin-right: auto; }
.entry-content figcaption { font-size: 14px; opacity: .7; margin-top: 8px; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--ca-dark) 20%, transparent); text-align: left; }
.entry-content .wp-block-button__link, .entry-content .wp-element-button {
	background: var(--ca-accent); color: var(--ca-dark); border-radius: 0; padding: 16px 26px; text-decoration: none; font-weight: 500;
}
.entry-content .wp-block-button__link:hover { background: var(--ca-dark); color: var(--ca-light); }
.entry-content .wp-block-gallery { gap: 15px; }

.ca-breadcrumbs { padding-top: 30px; font-size: 14px; }
.ca-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ca-breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.ca-breadcrumbs a { opacity: .75; }
.ca-breadcrumbs a:hover { opacity: 1; }

/* Facts list on single project / service */
.ca-facts { max-width: 1222px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 30px; padding-top: 60px; }
.ca-facts div { border-top: 1px solid var(--ca-dark); padding: 16px 0; }
.ca-facts dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.ca-facts dd { margin: 6px 0 0; font-size: 20px; }
.ca-lead { max-width: 1222px; margin: 0 auto; padding-top: 80px; font-size: 32px; line-height: 1.35; font-weight: 500; color: var(--ca-dark); }
.ca-lead strong { color: var(--ca-accent); font-weight: 500; }
.ca-scope { max-width: 1222px; margin: 40px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.ca-scope li { padding: 10px 18px; background: #fff; font-size: 16px; }

/* Blog cards */
.ca-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 30px; padding-top: 100px; }
.ca-post-card .ca-project-media { aspect-ratio: 16 / 11; }
.ca-post-date { display: block; margin-top: 18px; font-size: 14px; opacity: .65; }
.ca-post-card h2 { margin: 6px 0 10px; font-size: 24px; letter-spacing: 0; }
.ca-post-card p { margin: 0; font-size: 16px; }
.ca-pagination { padding: 80px 0 0; display: flex; justify-content: center; gap: 8px; }
.ca-pagination .page-numbers { min-width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; background: #fff; }
.ca-pagination .current, .ca-pagination a:hover { background: var(--ca-accent); color: var(--ca-dark); }
.ca-empty { padding: 100px 0; text-align: center; }
.search-form { display: flex; gap: 15px; max-width: 520px; margin: 30px auto 0; }
.search-form label { flex: 1; }
.search-form .search-submit { background: var(--ca-accent); border: 0; padding: 0 24px; cursor: pointer; color: var(--ca-dark); font-weight: 500; }
.ca-post-nav { max-width: 860px; margin: 80px auto 0; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--ca-dark); padding-top: 24px; }
.ca-post-nav a { font-weight: 500; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ca-footer { background: var(--ca-dark); color: var(--ca-light); padding: 100px var(--ca-gutter) 40px; }
.ca-footer a { color: var(--ca-light); }
.ca-footer a:hover { color: var(--ca-accent); }
.ca-footer-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ca-footer-brand .ca-logo img { width: 66px; }
.ca-footer-about { margin: 24px 0 0; max-width: 340px; font-size: 15px; line-height: 1.6; opacity: .7; }
.ca-footer-title { margin: 0 0 32px; font-size: 18px; font-weight: 300; line-height: 1; letter-spacing: 0; color: var(--ca-cream); text-transform: capitalize; }
.ca-footer-col:first-of-type .ca-footer-title { padding-left: 11px; }
.ca-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ca-footer-links a { font-size: 17px; font-weight: 400; line-height: 1.6; }
.ca-footer-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-items: start; }
.ca-footer-social a { display: inline-flex; }
.ca-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ca-footer-contact a { display: inline-flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.6; }
.ca-footer-contact a > span { display: block; }
.ca-footer-contact .ca-icon { flex: none; margin-top: 2px; }
.ca-footer-contact strong { display: block; font-weight: 400; }
.ca-footer-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; margin-top: 120px; font-size: 16px; text-align: center; }
.ca-footer-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.ca-footer-bottom p { margin: 0; }

/* Floating buttons */
.ca-to-top {
	position: fixed; right: 40px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; padding: 0;
	color: var(--ca-light);
	background: radial-gradient(closest-side, var(--ca-dark) 88%, transparent 90%), conic-gradient(var(--ca-accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--ca-light) 40%, transparent) 0);
	opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s;
}
.ca-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ca-wa {
	position: fixed; left: 20px; bottom: 20px; z-index: 40; width: 54px; height: 54px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.ca-wa:hover { color: #fff; transform: scale(1.06); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	.ca-hse-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ca-feature img { height: 520px; }
}
@media (max-width: 1024px) {
	.ca-section-head { padding-top: 90px; padding-bottom: 60px; }
	.ca-section-title { font-size: 56px; }
	.ca-hero-title { font-size: 64px; }
	.ca-cards, .ca-values, .ca-projects-grid, .ca-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ca-cards { gap: 30px; }
	.ca-carousel-track { grid-auto-columns: calc((100% - 15px) / 2); }
	.ca-feature img { height: 420px; }
	.ca-statement-text { font-size: 32px; line-height: 1.45; }
	.ca-cert-title { font-size: 36px; }
	.ca-doc-name { font-size: 28px; }
	.ca-footer-grid { grid-template-columns: 1fr 1fr; }
	.ca-footer-brand { grid-column: 1 / -1; }
	.ca-contact { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.ca-section-head { padding-top: 70px; padding-bottom: 40px; align-items: center; }
	.ca-section--first .ca-section-head { padding-top: 50px; }
	.ca-section-title { font-size: 42px; padding-left: 30px; }
	.ca-section-title::before { width: 20px; height: 20px; left: 2px; }
	.ca-section-head .ca-square-btn { width: 80px; height: 80px; font-size: 14px; }
	.ca-hero-title { font-size: 48px; margin-bottom: 10px; }
	.ca-hero-sub { font-size: 17px; }
	.ca-hero-side { display: none; }
	.ca-hero-dots { right: 15px; }
	.ca-cards, .ca-values, .ca-projects-grid, .ca-posts, .ca-doc-scans { grid-template-columns: minmax(0, 1fr); }
	.ca-service-card { min-height: 0; }
	.ca-service-summary, .ca-hse-text { text-align: left; }
	.ca-carousel-track { grid-auto-columns: 86%; }
	.ca-feature img { height: 300px; }
	.ca-hse-grid { grid-template-columns: minmax(0, 1fr); margin: 0 var(--ca-gutter); padding: 0 0 30px; }
	.ca-hse-heading { font-size: 26px; line-height: 1.15; }
	.ca-cert-title { font-size: 28px; }
	.ca-cert-meta { flex-direction: column; gap: 6px; }
	.ca-cert-meta p { font-size: 17px; }
	.ca-doc-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ca-doc-name { font-size: 22px; margin-bottom: 10px; }
	.ca-doc-reg { font-size: 17px; }
	.ca-statement-text { font-size: 24px; line-height: 1.45; text-align: left; }
	.ca-contact { padding: 64px 16px; }
	.ca-form-grid { grid-template-columns: 1fr; }
	.ca-lead { font-size: 24px; }
	.entry-content { font-size: 17px; }
	.entry-content h2 { font-size: 32px; }
	.ca-footer { padding-top: 70px; }
	.ca-footer-grid { grid-template-columns: 1fr; gap: 44px; }
	.ca-footer-col:first-of-type .ca-footer-title { padding-left: 0; }
	.ca-footer-bottom { margin-top: 70px; }
	.ca-to-top { right: 16px; }
}

/* ==========================================================================
   Arabic (right-to-left): /ar pages have <html lang="ar" dir="rtl">.
   Flex and grid rows flip by themselves; these rules mirror the left/right details.
   ========================================================================== */
:root[lang="ar"] { --ca-font: "IBM Plex Sans Arabic", "Funnel Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .ca-section-title, [dir="rtl"] .ca-hero-title, [dir="rtl"] .ca-menu a { letter-spacing: 0; }
[dir="rtl"] .ca-section-title, [dir="rtl"] .ca-hero-title { line-height: 1.25; }
[dir="rtl"] .ca-cert-title, [dir="rtl"] .ca-hse-heading, [dir="rtl"] .ca-doc-name { line-height: 1.35; }
[dir="rtl"] .ca-statement-text { line-height: 1.6; }
[dir="rtl"] .ca-form label, [dir="rtl"] .ca-contact dt, [dir="rtl"] .ca-facts dt { letter-spacing: 0; }

[dir="rtl"] .skip-link:focus { left: auto; right: 10px; }
[dir="rtl"] .ca-section-title { padding-left: 0; padding-right: 35px; }
[dir="rtl"] .ca-section-title::before { left: auto; right: 5px; }
[dir="rtl"] .ca-logo img { object-position: right center; }
[dir="rtl"] .ca-header-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ca-menu a::after { left: 100%; right: 0; transition: left .35s var(--ca-ease); }
[dir="rtl"] .ca-menu a:hover::after, [dir="rtl"] .ca-menu .current-menu-item > a::after, [dir="rtl"] .ca-menu .current_page_item > a::after { left: 0; }
[dir="rtl"] .ca-menu .sub-menu { left: auto; right: -20px; }
@media (min-width: 1100px) {
	[dir="rtl"] .ca-nav { transform: translateX(-30px); }
}

[dir="rtl"] .ca-hero-sub { margin: 0 5px 0 0; }
[dir="rtl"] .ca-hero-side { text-align: left; }
[dir="rtl"] .ca-hero-dots { right: auto; left: 30px; }

[dir="rtl"] .ca-service-body { padding-right: 0; padding-left: 30px; }
[dir="rtl"] .ca-service-dot, [dir="rtl"] .ca-service-scope { margin-right: 0; margin-left: -30px; }
[dir="rtl"] .ca-hse-grid { padding: 0 var(--ca-gutter) 15px 0; }

[dir="rtl"] .ca-form-note { border-left: 0; border-right: 4px solid var(--ca-accent); }
[dir="rtl"] .ca-form-note.is-error { border-color: #c0392b; }
[dir="rtl"] .ca-form input[type="email"], [dir="rtl"] .ca-form input[type="tel"] { direction: ltr; text-align: right; }

[dir="rtl"] .entry-content ul, [dir="rtl"] .entry-content ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .entry-content blockquote { border-left: 0; border-right: 4px solid var(--ca-accent); padding: 4px 24px 4px 0; }
[dir="rtl"] .entry-content th, [dir="rtl"] .entry-content td { text-align: right; }
[dir="rtl"] .ca-breadcrumbs li + li::before { margin-right: 0; margin-left: 6px; }

[dir="rtl"] .ca-footer-col:first-of-type .ca-footer-title { padding-left: 0; padding-right: 11px; }
[dir="rtl"] .ca-to-top { right: auto; left: 40px; }
[dir="rtl"] .ca-wa { left: auto; right: 20px; }

@media (max-width: 1099px) {
	[dir="rtl"] .ca-menu .sub-menu { padding: 0 18px 0 0; }
}
@media (max-width: 767px) {
	[dir="rtl"] .ca-section-title { padding-right: 30px; }
	[dir="rtl"] .ca-section-title::before { right: 2px; }
	[dir="rtl"] .ca-hero-dots { left: 15px; }
	[dir="rtl"] .ca-service-summary, [dir="rtl"] .ca-hse-text, [dir="rtl"] .ca-statement-text { text-align: right; }
	[dir="rtl"] .ca-hse-grid { padding: 0 0 30px; }
	[dir="rtl"] .ca-footer-col:first-of-type .ca-footer-title { padding-right: 0; }
	[dir="rtl"] .ca-to-top { left: 16px; }
}

/* ==========================================================================
   Projects page showcase: one full-screen slider per sector. Scrolling moves
   section by section, so each one comes up and fills the whole screen
   (mouse wheel: main.js; touch screens: scroll snapping below).
   ========================================================================== */
@media (hover: none) {
	html:has(.ca-showcase) { scroll-snap-type: y mandatory; }
	html:has(.ca-showcase) .ca-hero, .ca-show { scroll-snap-align: start; scroll-snap-stop: always; }
	html:has(.ca-showcase) .ca-footer { scroll-snap-align: end; }
}
.ca-show { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ca-dark); color: var(--ca-light); }
/* Coming into view: the photo settles from a slight zoom, the titles rise in (main.js adds .is-active). */
.js .ca-show .ca-show-slide img { transform: scale(1.08); transition: transform 1.6s var(--ca-ease); }
.js .ca-show .ca-show-title, .js .ca-show .ca-show-head { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ca-ease) .25s, transform .9s var(--ca-ease) .25s; }
.js .ca-show.is-active .ca-show-slide img { transform: none; }
.js .ca-show.is-active .ca-show-title, .js .ca-show.is-active .ca-show-head { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html:has(.ca-showcase) { scroll-snap-type: none; }
	.js .ca-show .ca-show-slide img, .js .ca-show .ca-show-title, .js .ca-show .ca-show-head { opacity: 1; transform: none; transition: none; }
}
.ca-show-track {
	display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
}
.ca-show-track::-webkit-scrollbar { display: none; }
.ca-show-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; }
.ca-show-slide img { width: 100%; height: 100%; object-fit: cover; }
.ca-show-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.45) 100%);
}
.ca-show-title {
	position: absolute; z-index: 2; inset-inline-start: var(--ca-gutter); bottom: 22px; max-width: min(70%, 900px);
	margin: 0; font-size: 46px; font-weight: 500; line-height: 1.1; letter-spacing: -.9px; color: var(--ca-light);
}
.ca-show-title a { color: inherit; }
.ca-show-title a::after { content: ""; position: absolute; inset: -100vh -100vw; } /* whole slide is the link (clipped by the slide) */
.ca-show-title a:hover { color: var(--ca-light); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ca-show-head {
	position: absolute; z-index: 3; top: 15px; inset-inline: var(--ca-gutter);
	display: flex; align-items: flex-start; justify-content: space-between; gap: 30px;
	pointer-events: none;
}
.ca-show-sector { margin: 0; font-size: 52px; line-height: 1.1; color: var(--ca-light); text-transform: capitalize; }
.ca-show-head .ca-square-btn { pointer-events: auto; }
.ca-show-arrow {
	position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; padding: 0;
	display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer;
	color: var(--ca-light); opacity: .8; transition: opacity .25s, color .25s;
}
.ca-show-arrow:hover { opacity: 1; color: var(--ca-accent); }
.ca-show-prev { inset-inline-start: 8px; }
.ca-show-next { inset-inline-end: 8px; }
.ca-show-prev .ca-icon, [dir="rtl"] .ca-show-next .ca-icon { transform: scaleX(-1); }
[dir="rtl"] .ca-show-prev .ca-icon { transform: none; }
[dir="rtl"] .ca-show-title, [dir="rtl"] .ca-show-sector { letter-spacing: 0; line-height: 1.3; }
.ca-show-all { padding-bottom: 80px; }
@media (max-width: 1024px) {
	.ca-show-sector { font-size: 42px; }
	.ca-show-title { font-size: 36px; }
}
@media (max-width: 767px) {
	.ca-show-sector { font-size: 30px; }
	.ca-show-title { font-size: 26px; max-width: calc(100% - 2 * var(--ca-gutter)); bottom: 18px; }
	.ca-show-head .ca-square-btn { width: 80px; height: 80px; font-size: 14px; }
	.ca-show-arrow { width: 44px; height: 44px; }
	.ca-show-arrow .ca-icon { width: 32px; height: 32px; }
}

/* Hover cursor (main.js): see-through blue square that follows the mouse over project photos. */
.ca-cursor {
	position: fixed; left: 0; top: 0; z-index: 60; width: 90px; height: 90px; margin: -45px 0 0 -45px;
	background: color-mix(in srgb, var(--ca-accent) 60%, transparent); pointer-events: none;
	scale: 0; opacity: 0; transition: scale .35s var(--ca-ease), opacity .25s;
}
.ca-cursor.is-on { scale: 1; opacity: 1; }
.ca-cursor.is-on.is-down { scale: .82; }
.ca-has-cursor :is(.ca-show-slide, .ca-project-card, .ca-gallery a, .ca-doc-scans a),
.ca-has-cursor :is(.ca-show-slide, .ca-project-card, .ca-gallery a, .ca-doc-scans a) * { cursor: none; }
.ca-has-cursor :is(.ca-square-btn, .ca-show-arrow) { cursor: pointer; }