/* =========================================================
   TRA — Custom overrides on top of the Porto theme
   (theme.css, theme-elements.css, demos/tr.css, skins/tr.css)
   ========================================================= */

:root{
	--tra-teal: #0e7c7b;      /* sub-heading & counter accent, from TRA - Profile 2026.pdf */
	--tra-teal-rgba-10: rgba(14,124,123,0.1);
	--tra-navy: #12203D;
	--tra-navy-2: #1C3159;
	--tra-paper: #F6F3EC;
	--tra-paper-2: #EEE8D8;
	--tra-paper-line: #DDD3B8;
}

/* ---------- teal accent (sub-headings & counters) ---------- */
.text-color-teal{ color: var(--tra-teal) !important; }

.eyebrow{
	display:inline-flex;
	align-items:center;
	gap:10px;
	color: var(--tra-teal);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.eyebrow::before{
	content:'';
	width: 24px;
	height: 2px;
	background: var(--tra-teal);
	display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }
.eyebrow.on-dark{ color:#5FD3D1; }
.eyebrow.on-dark::before{ background:#5FD3D1; }

.counters .counter.counter-teal [class*="fa-"],
.counters .counter.counter-teal .icons,
.counters .counter.counter-teal strong,
.counters.counters-text-dark .counter.counter-teal [class*="fa-"],
.counters.counters-text-dark .counter.counter-teal .icons,
.counters.counters-text-dark .counter.counter-teal strong{
	color: var(--tra-teal) !important;
}

/* ---------- nav: fit all 6 flat items on one line at desktop widths ---------- */
#header .header-nav-main nav > ul > li > a{
	padding: 0.5rem 0.65rem;
	font-size: 12.5px;
	letter-spacing: -0.2px;
}
@media (min-width: 992px) and (max-width: 1300px){
	#header .header-nav-main nav > ul > li > a{
		padding: 0.5rem 0.45rem;
		font-size: 11.5px;
	}
}

/* ---------- hero panel (no carousel — single static panel) ---------- */
.hero-panel{
	background: var(--tra-navy);
	position: relative;
	overflow: hidden;
	padding: 90px 0 76px;
}
.hero-panel::before{
	content:'';
	position:absolute; inset:0;
	background-image: repeating-linear-gradient(0deg, rgba(247,245,240,0.035) 0px, rgba(247,245,240,0.035) 1px, transparent 1px, transparent 64px);
	pointer-events:none;
}
.hero-panel .container{ position:relative; }

/* ---------- counters strip (below hero) ---------- */
.counters-strip{
	background: var(--tra-paper-2);
	border-bottom: 1px solid var(--tra-paper-line);
	padding: 46px 0;
}
.counters-strip .counter{
	padding: 0 10px;
}
.counters-strip .counter strong{
	font-size: 42px;
	line-height: 44px;
	font-weight: 800;
}
.counters-strip .counter label{
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--dark--200);
	margin-top: 6px;
	max-width: 220px;
	margin-left:auto;
	margin-right:auto;
}

/* ---------- section rhythm ---------- */
.section-paper{ background: var(--tra-paper); }
.section-paper-2{ background: var(--tra-paper-2); }
.section-navy{ background: var(--tra-navy); }

/* ---------- pull quote (philosophy) ---------- */
.pull-quote{
	background: var(--tra-navy);
	color: #F7F5F0;
	padding: 40px 36px;
	position:relative;
}
.pull-quote::before{
	content:'';
	position:absolute; top:0; left:0; width:4px; height:100%;
	background: var(--tra-teal);
}
.pull-quote .quote-mark{ font-size:3rem; color:#5FD3D1; line-height:0.5; display:block; margin-bottom:14px; font-family: Georgia, serif;}
.pull-quote p{ font-style: italic; font-size: 1.3rem; line-height:1.5; color:#F7F5F0; font-weight:500; }
.pull-quote .attrib{ margin-top:20px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(247,245,240,0.55); }

/* ---------- division (ledger entries) ---------- */
.division{
	display:grid;
	grid-template-columns: 170px 1fr;
	gap: 34px;
	padding: 42px 0;
	border-top: 1px solid var(--tra-paper-line);
}
.division:last-child{ border-bottom: 1px solid var(--tra-paper-line); }
.division-index{
	font-size: 3rem;
	font-weight:800;
	color: var(--tra-navy);
	line-height:1;
}
.division-num-label{
	font-size: 0.7rem;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color: var(--tra-teal);
	display:block;
	margin-top:10px;
	font-weight:700;
}
.division-body h3{ margin-bottom:6px; }
.division-tagline{
	font-style: italic;
	color: var(--primary);
	font-size: 1.05rem;
	margin-bottom: 14px;
}
.division-overview{ color: var(--dark--200); max-width: 68ch; margin-bottom: 20px; }
.division-closing{
	font-style: italic;
	color: var(--tra-teal);
	font-size: 1rem;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px dashed var(--tra-paper-line);
	max-width: 60ch;
}
.division-caps{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; list-style:none; padding:0; margin:0; }
.division-caps li{ font-size: 0.94rem; padding-left: 20px; position:relative; line-height:1.5; }
.division-caps li::before{ content:'—'; position:absolute; left:0; top:0; color: var(--tra-teal); }

@media (max-width: 767px){
	.division{ grid-template-columns: 1fr; gap:12px; }
	.division-caps{ grid-template-columns: 1fr; }
}

/* ---------- partner cards ---------- */
.partner-card{
	background: var(--tra-paper);
	border: 1px solid var(--tra-paper-line);
	padding: 34px 28px;
	height:100%;
}
.partner-logo{ height: 86px; display:flex; align-items:center; margin-bottom:18px; }
.partner-logo img{ height:100%; width:auto; object-fit:contain; }
.partner-role{
	font-size: 0.68rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color: var(--tra-teal);
	font-weight:700;
	display:block;
	margin-bottom:6px;
}

/* ---------- region cards ---------- */
.region-card{
	background: var(--tra-paper);
	border: 1px solid var(--tra-paper-line);
	height:100%;
	overflow:hidden;
}
.region-card.no-media{ padding: 40px 36px; }

/* ---------- tag / industries grid ---------- */
.tag-card{
	border: 1px solid var(--tra-paper-line);
	padding: 20px 20px;
	font-size: 0.98rem;
	background: var(--tra-paper);
	transition: border-color .15s, background .15s;
	height:100%;
	display:flex;
	align-items:center;
	gap:12px;
}
.tag-card .idx{ color: var(--tra-teal); font-weight:700; font-size:0.8rem; }
.tag-card:hover{ border-color: var(--tra-teal); background: var(--tra-paper-2); }

.tag-card{
	border: none;
	border-left: 4px solid var(--tra-teal);
	background: #fff;
	box-shadow: 0 6px 18px rgba(18,32,61,0.06);
	font-weight: 600;
	color: var(--tra-navy);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.tag-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(14,124,123,0.18);
	background: #fff;
	border-color: var(--tra-teal);
}
.tag-card-icon{
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 10px;
	background: var(--tra-teal-rgba-10);
	color: var(--tra-teal);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1.1rem;
	transition: background .18s ease, color .18s ease;
}
.tag-card:hover .tag-card-icon{
	background: var(--tra-teal);
	color:#fff;
}
.tag-card-text{ display:flex; flex-direction:column; }
.tag-card-label{ font-weight:600; }
.tag-card .idx{
	color: var(--tra-teal);
	font-weight:800;
	font-size:0.68rem;
	letter-spacing:0.08em;
	display:block;
	margin-bottom: 2px;
}

/* ---------- achievement cards (about page — track record) ---------- */
.achievement-card{
	background: #fff;
	border-radius: 12px;
	border-top: 4px solid var(--tra-teal);
	box-shadow: 0 8px 22px rgba(18,32,61,0.07);
	padding: 30px 26px;
	height:100%;
	display:flex;
	flex-direction:column;
	gap: 16px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.achievement-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 16px 32px rgba(14,124,123,0.16);
}
.achievement-card p{
	margin:0;
	font-size: 0.98rem;
	line-height:1.55;
	color: var(--tra-navy);
	font-weight:500;
}
.achievement-icon{
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tra-teal) 0%, #5FD3D1 100%);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1.3rem;
	box-shadow: 0 6px 14px rgba(14,124,123,0.28);
}

/* ---------- "why it matters" cards (partnerships page) ---------- */
.matters-card{
	background:#fff;
	border-radius: 12px;
	border: 1px solid var(--tra-paper-line);
	border-bottom: 4px solid var(--tra-teal);
	box-shadow: 0 8px 22px rgba(18,32,61,0.06);
	padding: 34px 32px;
	height:100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.matters-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(14,124,123,0.14);
}
.matters-icon{
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--tra-teal-rgba-10);
	color: var(--tra-teal);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1.4rem;
	margin-bottom: 18px;
}
.matters-card h3{ color: var(--tra-navy); }

/* ---------- values grid (about page) ---------- */
.value-card{
	background: var(--tra-paper);
	border: 1px solid var(--tra-paper-line);
	padding: 30px;
	height:100%;
}
.value-card .value-tag{
	font-size: 0.68rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color: var(--tra-teal);
	font-weight:700;
	display:block;
	margin-bottom:8px;
}

/* ---------- advantage cards (dark section) ---------- */
.advantage-card .adv-num{
	color: #5FD3D1;
	font-size:0.8rem;
	letter-spacing:0.12em;
	font-weight:700;
}
.advantage-card h3{ color:#fff; margin: 12px 0 10px; }
.advantage-card p{ color: rgba(247,245,240,0.68); }

/* ---------- statement style contact card ---------- */
.form-card{
	background: var(--tra-navy);
	padding: 40px;
}
.form-card label{
	color:#5FD3D1;
	font-size:0.72rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-weight:700;
}
.form-card .form-control{
	background: rgba(247,245,240,0.06);
	border: 1px solid rgba(247,245,240,0.16);
	color:#F7F5F0;
}
.form-card .form-control::placeholder{ color: rgba(247,245,240,0.35); }
.form-card .form-control:focus{
	background: rgba(247,245,240,0.1);
	border-color: var(--tra-teal);
	box-shadow: none;
	color:#fff;
}

/* ---------- misc ---------- */
.rule-paper{ height:1px; background: var(--tra-paper-line); border:0; }
.map-wrap{ border:1px solid var(--tra-paper-line); }
.map-wrap iframe{ width:100%; height:320px; border:0; display:block; }

.metrics-inline strong{ color: var(--tra-teal); }

/* ---------- section padding (py-6/py-7 don't exist in Bootstrap/theme — define them) ---------- */
.py-6{ padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.py-7{ padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
@media (max-width: 767px){
	.py-6{ padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
	.py-7{ padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* ---------- imagery ---------- */
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-panel{ background-size: cover; background-position: center; }
.hero-panel.has-photo{ position:relative; }
.hero-panel.has-photo::after{
	content:'';
	position:absolute; inset:0;
	background: linear-gradient(100deg, rgba(18,32,61,0.94) 0%, rgba(18,32,61,0.88) 45%, rgba(18,32,61,0.72) 100%);
	z-index:0;
}
.hero-panel.has-photo::before{ z-index:1; }
.hero-panel.has-photo .container{ z-index:2; }

.photo-frame{
	position:relative;
	overflow:hidden;
	border: 1px solid var(--tra-paper-line);
}
.photo-frame img{ transition: transform .5s ease; }
.photo-frame:hover img{ transform: scale(1.04); }

.division-media{
	overflow:hidden;
	border: 1px solid var(--tra-paper-line);
	margin-bottom: 22px;
	height: 190px;
}
.division-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.value-media{ height:150px; overflow:hidden; margin-bottom:18px; border-bottom:3px solid var(--tra-teal); }
.value-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.region-media{ height:200px; overflow:hidden; margin-bottom:0; }
.region-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.cta-photo-band{
	position:relative;
	background-size: cover;
	background-position: center;
	overflow:hidden;
}
.cta-photo-band::before{
	content:'';
	position:absolute; inset:0;
	background: linear-gradient(100deg, rgba(18,32,61,0.95) 0%, rgba(18,32,61,0.9) 55%, rgba(18,32,61,0.78) 100%);
}
.cta-photo-band .container{ position:relative; z-index:1; }

.who-we-are-photo{
	border: 1px solid var(--tra-paper-line);
	overflow:hidden;
	height: 100%;
	min-height: 320px;
}
.who-we-are-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- hero slider (rotating banner) ---------- */
.hero-slider-wrapper{
	background: var(--tra-navy);
	position: relative;
	overflow: hidden;
}
.hero-slider-wrapper::before{
	content:'';
	position:absolute; inset:0;
	background-image: repeating-linear-gradient(0deg, rgba(247,245,240,0.035) 0px, rgba(247,245,240,0.035) 1px, transparent 1px, transparent 64px);
	pointer-events:none;
	z-index:0;
}
.hero-slide{
	position:relative;
	z-index:1;
	padding: 26px 0;
	min-height: 460px;
	display:flex;
	align-items:center;
}
.slide-badge{
	display:inline-block;
	padding: 7px 18px;
	border: 1px solid var(--tra-teal);
	color: #5FD3D1;
	border-radius: 30px;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 22px;
}
.hero-slide h1, .hero-slide h2{
	color: #F7F5F0;
	font-weight: 800;
	line-height: 1.15;
	font-size: clamp(1.7rem, 2.9vw, 2.5rem);
	margin-bottom: 20px;
}
.hero-slide p{
	color: rgba(247,245,240,0.78);
	font-size: 1.05rem;
	line-height: 1.65;
	margin-bottom: 32px;
	max-width: 52ch;
}
.slide-media{
	border: 1px solid var(--line-navy, rgba(247,245,240,0.16));
	overflow: hidden;
	background: var(--tra-navy-2);
	box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.slide-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 5/4; }
.slide-media.slide-media-cloud{
	aspect-ratio: 5/4;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap: 30px;
	padding: 30px;
	background: linear-gradient(150deg, var(--tra-navy-2) 0%, var(--tra-navy) 100%);
}
.slide-media-cloud .cloud-icon{ color: rgba(95,211,209,0.35); font-size: 4.4rem; }
.slide-media-cloud .cloud-caption{
	color: rgba(247,245,240,0.55);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}
.slide-media-cloud .cloud-logos{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center; }
.slide-media-cloud .cloud-logos img{ height:64px; width:auto; object-fit:contain; background:#fff; padding:18px 28px; border-radius:8px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }

/* owl dots on dark hero */
.hero-slider.owl-theme .owl-dots{ margin-top: 26px !important; }
.hero-slider.owl-theme .owl-dots .owl-dot span{ background: rgba(247,245,240,0.35); }
.hero-slider.owl-theme .owl-dots .owl-dot.active span, .hero-slider.owl-theme .owl-dots .owl-dot:hover span{ background: var(--tra-teal); }

@media (max-width: 991px){
	.hero-slide{ min-height: 0; padding: 52px 0 40px; }
	.slide-media{ margin-top: 32px; max-width: 420px; margin-left:auto; margin-right:auto; }
}

/* ---------- quick service strip ---------- */
.quick-service-strip{
	background: var(--tra-paper-2);
	border-bottom: 1px solid var(--tra-paper-line);
}
.quick-service-strip .row{ --bs-gutter-x: 0; }
.quick-service-item{
	display:flex;
	align-items:center;
	gap:16px;
	padding: 26px 24px;
	border-left: 1px solid var(--tra-paper-line);
	height:100%;
	text-decoration:none;
	transition: background .15s;
}
.quick-service-item:first-child{ border-left:0; }
.quick-service-item:hover{ background: var(--tra-paper); }
.quick-service-item .icons{
	font-size: 1.7rem;
	color: var(--tra-teal);
	flex-shrink:0;
}
.quick-service-item .label{
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--tra-navy);
	line-height:1.3;
}
@media (max-width: 767px){
	.quick-service-item{ border-left:0; border-top: 1px solid var(--tra-paper-line); }
	.quick-service-item:first-child{ border-top:0; }
}

/* ---------- client engagements table ---------- */
.client-table{
	border: 1px solid var(--tra-paper-line);
	background: var(--tra-paper);
	margin-bottom: 0;
}
.client-table thead th{
	background: var(--tra-navy);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 16px 20px;
	border: 0;
}
.client-table tbody td{
	padding: 16px 20px;
	border-top: 1px solid var(--tra-paper-line);
	vertical-align: middle;
	font-size: 0.94rem;
}
.client-table tbody tr:nth-child(even){ background: var(--tra-paper-2); }
.client-table tbody td:first-child{ font-weight: 700; }
.client-table tbody td:last-child{ color: var(--tra-teal); font-weight: 600; }

#home .icons{font-size: 2rem;}
#home .h2{font-size: .5rem;}
#home {background: var(--tra-paper);}