/* ==========================================================================
   Tabadul theme — base, header, footer
   Proportions follow the approved blueprint (header 86px, containers
   1140 / 1600 / 750, wide-block inset 1/12 of the viewport).
   ========================================================================== */

:root {
	--tb-primary: #C40D0E;
	/* the logo red, used on the pages at 90% so it sits slightly softer; the logo itself is an untouched image */
	--tb-red: rgba(196, 13, 14, 0.72);
	--tb-secondary: #F49819;
	--tb-gray: #575756;
	--tb-dark: #1D1D1C;
	--tb-ground: #F7F7F6;
	--tb-ink: #1D1D1C;
	--tb-white: #FFFFFF;
	--tb-line: rgba(29, 29, 28, .12);
	--tb-muted: #8C8C8A;

	/* Dark header: the wordmark of the logo is white, so the bar carries the
	   brand black and the menu the light text used on every other dark block. */
	--tb-header-bg: #1D1D1C;
	--tb-header-fg: #EDEDEC;
	--tb-header-line: rgba(255, 255, 255, .12);

	--tb-font: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	--tb-header-h: 86px;
	--tb-container: 1140px;
	--tb-wide: 1600px;
	--tb-narrow: 750px;
	--tb-inset: 8.333vw;
	--tb-gutter: 30px;
	--tb-cut: 40px;

	--tb-ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tb-header-h) + 20px); }

body {
	margin: 0;
	background: var(--tb-ground);
	color: var(--tb-ink);
	font-family: var(--tb-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .35s, opacity .35s, background-color .35s; }
a:hover { color: var(--tb-red); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 700; line-height: 1.12; text-wrap: balance; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--tb-secondary); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.tb-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--tb-dark); color: #fff; padding: 10px 16px; font-size: 15px;
}
.tb-skip:focus { top: 12px; color: #fff; }

.tb-eyebrow {
	font-size: 14.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--tb-secondary); margin-bottom: 14px;
}

/* ---------- Buttons (shared with Tabadul Blocks) ---------- */
.tb-btn {
	display: inline-flex; align-items: center; gap: 14px;
	min-height: 48px; padding: 0 26px;
	font-size: 14.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	border: 1px solid transparent; cursor: pointer;
	transition: background-color .35s, color .35s, border-color .35s, padding .35s;
}
.tb-btn--primary { background: var(--tb-red); color: #fff; }
.tb-btn--primary:hover { background: #fff; color: var(--tb-red); }
.tb-btn--outline { border-color: var(--tb-secondary); color: #fff; }
.tb-btn--outline:hover { background: var(--tb-secondary); color: var(--tb-dark); }
.tb-btn--dark { background: var(--tb-dark); color: #fff; }
.tb-btn--dark:hover { background: var(--tb-red); color: #fff; }

/* "READ MORE" style link: line + caps, line grows on hover */
.tb-more {
	display: inline-flex; align-items: center; gap: 14px;
	font-size: 13.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
	color: inherit;
}
.tb-more::before {
	content: ""; width: 30px; height: 1px; background: currentColor; transition: width .35s var(--tb-ease);
}
.tb-more:hover { color: var(--tb-secondary); }
.tb-more:hover::before { width: 50px; }

/* ---------- Header ---------- */
.tb-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--tb-header-bg);
	color: var(--tb-header-fg);
	transition: box-shadow .35s;
}
.admin-bar .tb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tb-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .tb-header { top: 0; } }

.tb-header.is-scrolled { box-shadow: 0 1px 0 var(--tb-header-line), 0 10px 30px rgba(0, 0, 0, .28); }

.tb-header__inner {
	height: var(--tb-header-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding-inline: 24px;
}
.tb-logo { display: inline-flex; align-items: center; justify-self: start; }
/* Same rendered size as the reference site: 259x60 on desktop, 216x50 under the
   burger breakpoint. The file is 259x60, so desktop is a 1:1 pixel match. */
.tb-logo img { width: 259px; height: auto; max-width: 100%; }
.tb-logo--text { font-weight: 800; font-size: 22px; letter-spacing: 1px; }

.tb-menu, .tb-menu ul { list-style: none; margin: 0; padding: 0; }
.tb-menu { display: flex; gap: 6px; align-items: center; }
.tb-menu > li { position: relative; }
.tb-menu > li > a {
	position: relative; display: block; padding: 10px 14px;
	font-size: 14.5px; line-height: 18px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
	color: var(--tb-header-fg);
	transition: color .3s var(--tb-ease);
}
.tb-menu > li > a::before {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 6px;
	background: var(--tb-secondary); z-index: -1;
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--tb-ease);
}
/* The orange bar sits just under the caps, so the label stays light and the
   bar reads as an underline rather than a highlighter. */
.tb-menu > li > a:hover,
.tb-menu > li.current-menu-item > a,
.tb-menu > li.current-menu-ancestor > a,
.tb-menu > li.current_page_item > a,
.tb-menu > li.current_page_ancestor > a { color: var(--tb-white); }
.tb-menu > li > a:hover::before,
.tb-menu > li.current-menu-item > a::before,
.tb-menu > li.current-menu-ancestor > a::before,
.tb-menu > li.current_page_item > a::before,
.tb-menu > li.current_page_ancestor > a::before { transform: scaleX(1); }

/* Dropdown */
.tb-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px;
	background: var(--tb-dark); padding: 14px 0;
	border-top: 3px solid var(--tb-secondary);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .3s, transform .3s var(--tb-ease), visibility .3s;
}
.tb-menu > li:hover > .sub-menu,
.tb-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.tb-menu .sub-menu a {
	display: block; padding: 9px 22px; color: #E1E1E0;
	font-size: 14.5px; letter-spacing: 1px; text-transform: uppercase;
}
.tb-menu .sub-menu a:hover,
.tb-menu .sub-menu .current-menu-item > a { color: var(--tb-secondary); }

/* The nav sits between the logo and the right edge. With the larger, more legible
   type it needs its padding back on narrow laptops, so tighten it there only
   rather than shrinking the text again. */
@media (max-width: 1180px) {
	.tb-menu > li > a { padding-inline: 10px; letter-spacing: .6px; }
	.tb-menu { gap: 2px; }
}
@media (max-width: 980px) {
	/* Still larger than the 12px this used to be, just not the full 13.5px. */
	.tb-menu > li > a { padding-inline: 7px; letter-spacing: .3px; font-size: 13.5px; }
}
@media (max-width: 1180px) and (min-width: 841px) {
	.tb-nav { margin-left: 26px; }
}
/* Between the burger breakpoint and a wide desktop there is not enough room to
   centre the nav AND keep the logo at its reference size, because the centring
   reserves a column as wide as the logo on the empty right-hand side. Below
   1280px the nav simply sits at the right instead, so the logo never shrinks. */
@media (max-width: 1280px) and (min-width: 841px) {
	.tb-header__inner { grid-template-columns: auto minmax(0, 1fr); }
	.tb-nav { justify-self: end; }
}
.tb-sub-toggle { display: none; }

/* A top-level label that only opens its submenu (What We Do): looks exactly
   like its neighbours, but it is a button, not a link. */
.tb-menu > li > .tb-menu__parent {
	position: relative; display: block; padding: 10px 14px; margin: 0;
	background: transparent; border: 0; border-radius: 0; cursor: default;
	font: inherit; font-size: 14.5px; line-height: 18px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
	color: var(--tb-header-fg); transition: color .3s var(--tb-ease);
}
.tb-menu > li > .tb-menu__parent::before {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 6px;
	background: var(--tb-secondary); z-index: -1;
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--tb-ease);
}
.tb-menu > li:hover > .tb-menu__parent,
.tb-menu > li:focus-within > .tb-menu__parent,
.tb-menu > li.current-menu-ancestor > .tb-menu__parent,
.tb-menu > li.current-menu-parent > .tb-menu__parent { color: var(--tb-white); }
.tb-menu > li:hover > .tb-menu__parent::before,
.tb-menu > li:focus-within > .tb-menu__parent::before,
.tb-menu > li.current-menu-ancestor > .tb-menu__parent::before,
.tb-menu > li.current-menu-parent > .tb-menu__parent::before { transform: scaleX(1); }
.tb-menu__parent:focus-visible { outline: 2px solid var(--tb-secondary); outline-offset: 2px; }
.tb-menu__caret { display: none; }
@media (min-width: 841px) {
	/* opened by a tap on a touch laptop / tablet in landscape */
	.tb-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	/* the label follows the disclosure pattern: hover or Enter/click opens it,
	   Escape or a second click closes it even while the button keeps focus */
	.tb-menu > li:has(> .tb-menu__parent):not(:hover):not(.is-open) > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(10px); }
}
@media (max-width: 1180px) {
	.tb-menu > li > .tb-menu__parent { padding-inline: 10px; letter-spacing: .6px; }
}
@media (max-width: 980px) {
	.tb-menu > li > .tb-menu__parent { padding-inline: 7px; letter-spacing: .3px; font-size: 13.5px; }
}

/* Burger */
.tb-burger {
	display: none; justify-self: end;
	width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0;
}
.tb-burger__bars { display: grid; gap: 6px; width: 26px; margin: 0 auto; }
.tb-burger__bars i { display: block; height: 2px; background: var(--tb-header-fg); transition: transform .35s var(--tb-ease), opacity .2s; }
.tb-burger[aria-expanded="true"] .tb-burger__bars i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.tb-burger[aria-expanded="true"] .tb-burger__bars i:nth-child(2) { opacity: 0; }
.tb-burger[aria-expanded="true"] .tb-burger__bars i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 840px) {
	:root { --tb-header-h: 70px; }
	.tb-header__inner { grid-template-columns: 1fr auto; padding-inline: 16px; }
	.tb-logo img { width: 216px; }
	.tb-burger { display: block; }
	.tb-nav {
		position: fixed; inset: var(--tb-header-h) 0 0 0; z-index: 99;
		background: var(--tb-dark); overflow-x: hidden; overflow-y: auto;
		border-top: 1px solid var(--tb-header-line);
		padding: 30px 24px 60px;
		transform: translateX(100%); visibility: hidden;
		transition: transform .45s var(--tb-ease), visibility .45s;
	}
	.admin-bar .tb-nav { top: calc(var(--tb-header-h) + 46px); }
	.tb-nav.is-open { transform: none; visibility: visible; }
	.tb-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.tb-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; align-items: center; }
	.tb-menu > li > a { flex: 1; color: #fff; font-size: 15px; line-height: 20px; padding: 18px 0; letter-spacing: 2px; }
	.tb-menu > li > a:hover { color: var(--tb-secondary); }
	.tb-menu > li > a::before { display: none; }
	.tb-menu > li.current-menu-item > a,
	.tb-menu > li.current-menu-ancestor > a { color: var(--tb-secondary); }
	.tb-sub-toggle {
		display: block; width: 44px; height: 44px; border: 0; background: transparent; position: relative; cursor: pointer;
	}
	.tb-sub-toggle span::before,
	.tb-sub-toggle span::after {
		content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff;
		transform: translate(-50%, -50%); transition: transform .3s;
	}
	.tb-sub-toggle span::after { transform: translate(-50%, -50%) rotate(90deg); }
	.tb-sub-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0deg); }
	.tb-menu .sub-menu {
		position: static; flex-basis: 100%; min-width: 0; background: transparent; padding: 0 0 12px 14px;
		opacity: 1; visibility: visible; transform: none; display: none;
	}
	.tb-menu li.is-open > .sub-menu { display: block; }
	.tb-menu .sub-menu a { padding: 8px 0; font-size: 15px; }
	/* the whole row of the label is the tap target; the +/- sits at its right */
	.tb-menu > li > .tb-menu__parent {
		flex: 1; display: flex; align-items: center; justify-content: space-between; width: 100%;
		text-align: left; cursor: pointer; color: #fff; font-size: 15px; line-height: 20px; padding: 18px 0; letter-spacing: 2px;
	}
	.tb-menu > li > .tb-menu__parent::before { display: none; }
	.tb-menu > li:hover > .tb-menu__parent,
	.tb-menu > li:focus-within > .tb-menu__parent { color: #fff; }
	.tb-menu > li.current-menu-ancestor > .tb-menu__parent,
	.tb-menu > li.current-menu-parent > .tb-menu__parent { color: var(--tb-secondary); }
	.tb-menu__caret { display: block; position: relative; width: 44px; height: 20px; flex: none; margin-right: 0; }
	.tb-menu__caret::before,
	.tb-menu__caret::after {
		content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff;
		transform: translate(-50%, -50%); transition: transform .3s;
	}
	.tb-menu__caret::after { transform: translate(-50%, -50%) rotate(90deg); }
	.tb-menu__parent[aria-expanded="true"] .tb-menu__caret::after { transform: translate(-50%, -50%) rotate(0deg); }
	body.tb-nav-open { overflow: hidden; }
}

/* Sub-menu toggle never shows the browser's default grey button */
.tb-sub-toggle { background: transparent; border: 0; }

/* ---------- Service previous / next bar ---------- */
/* The bar hides behind the header row, so the row carries its own background above it. */
.tb-header__inner { position: relative; z-index: 1; background: var(--tb-header-bg); }
.tb-service-nav {
	position: absolute; left: 0; right: 0; top: 100%; z-index: -1;
	background: var(--tb-dark); color: var(--tb-header-fg);
	border-top: 1px solid var(--tb-header-line);
	transform: translateY(-100%); transition: transform .5s var(--tb-ease);
}
.tb-header.is-scrolled .tb-service-nav { transform: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.tb-service-nav__inner {
	max-width: var(--tb-container); margin: 0 auto; padding: 0 var(--tb-gutter);
	height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	font-size: 14.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.tb-service-nav__all { color: #B9B9B7; font-weight: 400; }
.tb-service-nav a { color: var(--tb-header-fg); }
.tb-service-nav a:hover { color: var(--tb-secondary); }
@media (max-width: 640px) {
	.tb-service-nav__all { display: none; }
	.tb-service-nav__inner { font-size: 13.5px; }
}

/* ---------- Footer ---------- */
.tb-footer { background: var(--tb-dark); color: #E1E1E0; }
.tb-footer__inner {
	max-width: var(--tb-container); margin: 0 auto;
	padding: 70px var(--tb-gutter) 40px;
}
.tb-footer__top {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding-top: 60px; border-top: 1px solid rgba(244, 152, 25, .45);
}
.tb-footer .tb-logo img { width: 259px; height: auto; }
.tb-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.tb-social a {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff;
	transition: background-color .35s, border-color .35s, color .35s;
}
.tb-social a:hover { background: var(--tb-red); border-color: var(--tb-red); color: #fff; }

.tb-footer__cols {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px;
	padding: 48px 0 60px;
}
/* Follow Us column: icon + name rows, aligned with the other footer lists */
.tb-social--labels { flex-direction: column; gap: 12px; }
.tb-social--labels a {
	display: inline-flex; align-items: center; gap: 12px; width: auto; height: auto;
	border: 0; border-radius: 0; background: none;
	font-size: 14.5px; letter-spacing: 1px; text-transform: uppercase; color: #E1E1E0; text-decoration: none;
}
.tb-social--labels .tb-social__icon {
	display: grid; place-items: center; width: 34px; height: 34px; flex: none;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff;
	transition: background-color .35s, border-color .35s;
}
.tb-social--labels a:hover { background: none; color: var(--tb-secondary); }
.tb-social--labels a:hover .tb-social__icon { background: var(--tb-red); border-color: var(--tb-red); }
.tb-footer__title {
	font-size: 14.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--tb-secondary); margin: 0 0 18px;
}
.tb-footer__menu, .tb-footer__list { list-style: none; margin: 0; padding: 0; }
.tb-footer__menu a, .tb-footer__list, .tb-footer__address {
	font-size: 14.5px; line-height: 30px; letter-spacing: 1px; color: #E1E1E0;
}
.tb-footer__menu a { text-transform: uppercase; }
.tb-footer__menu a:hover, .tb-footer__list a:hover { color: var(--tb-secondary); }
.tb-footer__list span { color: var(--tb-secondary); font-weight: 700; margin-right: 6px; }
/* the email address is one unbreakable string and was pushing the page into
   horizontal scroll on narrow tablets */
.tb-footer__list a { overflow-wrap: anywhere; }
.tb-footer__bottom {
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 13.5px; letter-spacing: 1px; color: #9A9A98;
	padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 768px) {
	.tb-footer__inner { padding-top: 60px; }
	.tb-footer__top { padding-top: 40px; }
	.tb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
	.tb-footer__cols { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 50px; }
}

/* ---------- Footer: desktop arrangement (>= 1101px only) ---------- */
/* Below this the three link columns and the brand column no longer fit side by
   side on one 1140px row, which was pushing the page into horizontal scroll. */
.tb-footer__addr-inline { display: none; }
@media (min-width: 1101px) {
	/* The footer's brand column is as wide as the three link columns leave it;
	   the logo fills it (and reaches its full 259px once the footer stacks). */
	.tb-footer__inner { display: grid; grid-template-columns: clamp(180px, 14vw, 215px) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px); align-items: start; }
	.tb-footer__top {
		grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start;
		padding-top: 56px; border-top: 0; align-self: stretch;
	}
	.tb-footer__cols {
		grid-column: 2; grid-row: 1;
		grid-template-columns: repeat(3, max-content); justify-content: space-between;
		gap: 32px; padding: 56px 0 56px clamp(28px, 3vw, 48px); border-left: 1px solid rgba(255, 255, 255, .08);
	}
	.tb-footer__inner::before {
		content: ""; grid-column: 1 / -1; grid-row: 1; align-self: start; height: 1px; background: rgba(244, 152, 25, .45);
	}
	.tb-footer__bottom { grid-column: 1 / -1; }
	.tb-footer__col--address { display: none; }
	.tb-footer__addr-inline { display: list-item; }
	.tb-footer__menu { display: grid; grid-template-columns: repeat(2, max-content); column-gap: clamp(24px, 3vw, 44px); }
	.tb-footer__list li { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
	.tb-footer__list span { flex: none; width: 12px; margin-right: 0; }
}

/* Footer credit link */
.tb-footer__credit a { color: #E1E1E0; text-decoration: none; border-bottom: 1px solid rgba(244, 152, 25, .5); padding-bottom: 1px; transition: color .3s, border-color .3s; }
.tb-footer__credit a:hover, .tb-footer__credit a:focus-visible { color: var(--tb-secondary); border-color: var(--tb-secondary); outline: none; }

/* ---------- Plain pages / 404 ---------- */
.tb-plain { max-width: var(--tb-narrow); margin: 0 auto; padding: 100px 20px 120px; }
.tb-plain__title { font-size: clamp(32px, 4vw, 48px); line-height: 1.12; margin-bottom: 30px; }
.tb-plain__body { font-size: 19px; line-height: 28px; }
.tb-list-item { padding: 24px 0; border-bottom: 1px solid var(--tb-line); }
.tb-404 { max-width: var(--tb-narrow); margin: 0 auto; padding: 140px 20px; text-align: center; }
.tb-404__title { font-size: clamp(34px, 5vw, 56px); }
.tb-404 p { color: var(--tb-gray); margin-bottom: 30px; }

/* Elementor: remove default page gaps so sections meet edge to edge */
.elementor-page .tb-main { overflow-x: clip; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--tb-container); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}