/* =========================================================
   ASFAR – Saudi Tourism Investment Company
   Custom Stylesheet
   ========================================================= */

/* =========================================================
   INTRO OVERLAY — emblem appears first, then full logo reveals
   ========================================================= */

.mt-intro_overlay {
  position: fixed;
  inset: 0;
  background: #144751;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.mt-intro_overlay.mt-intro_done {
  opacity: 0;
  pointer-events: none;
}

.mt-intro_logo {
  width: clamp(220px, 30vw, 360px);
  height: auto;
  opacity: 0;
  /* The logo SVG has the emblem on the RIGHT side and the ASFAR text on
     the LEFT. We start showing only the right portion (emblem) and then
     reveal the rest left-ward to bring the name in. */
  clip-path: inset(0 0 0 62%);
  animation:
    mt-intro_emblem_in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,
    mt-intro_name_reveal 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}

@keyframes mt-intro_emblem_in {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes mt-intro_name_reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* ── Logo & nav stagger-reveal after the intro overlay fades ─────────────
   Both elements start invisible and slightly above their final position.
   The logo appears first; the navigation follows 180 ms later, giving a
   clean sequential feel rather than everything popping in at once.       */
.mt-wrapper {
  opacity: 0;
  transform: translateY(-14px);
}

.mt-wrapper {
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}



body.mt-intro_complete .mt-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* Stop body scroll while intro is playing */
body:has(.mt-intro_overlay:not(.mt-intro_done)) {
  overflow: hidden;
}


   @font-face {
    font-family: 'Greta Arabic';
    src: url('../webfonts/GretaArabic-Bold.woff2') format('woff2'),
        url('../webfonts/GretaArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GE SS Two';
    src: url('../webfonts/GESSTwoMedium-Medium.woff2') format('woff2'),
        url('../webfonts/GESSTwoMedium-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GE SS Two';
    src: url('../webfonts/GESSTwoLight-Light.woff2') format('woff2'),
        url('../webfonts/GESSTwoLight-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../webfonts/GretaArabic-Medium.woff2') format('woff2'),
        url('../webfonts/GretaArabic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}





/* --- CSS Custom Properties --- */
:root {
  --primary-color: #144751;
  --secondary-color: #A6824A;
  --accent-color: #a96040;
  --light-color: #fbf9ee;
  --primary-fade: #25464e;
  --secondary-fade: #c0a77e;
  --plain-color: #ffffff;
  --dark-color: #292d2d;

  --html-font-size: 62.5%;
  --heading-font-family: 'Greta Arabic';
  --body-font-family: 'GE SS Two';
  --body-font-size: 1.8rem;
  --heading-one-size: clamp(3.2rem, 6vw, 5.6rem); /* 32px → 56px */
	--heading-two-size: clamp(2.8rem, 5vw, 4.6rem); /* 28px → 48px */
	--heading-three-size: clamp(2.4rem, 4vw, 3.2rem);   /* 24px → 40px */
	--heading-four-size: clamp(2rem, 3.5vw, 2.4rem); /* 20px → 32px */
	--heading-five-size: clamp(1.8rem, 3vw, 2.2rem); /* 18px → 22px */
	--heading-six-size: clamp(1.6rem, 2.5vw, 1.8rem); /* 16px → 18px */
--heading-font-weight : 700;

  --header-padding-top: 20px;
  --header-padding-bottom: 20px;

  --exlarge-padding: 250px;
  --large-padding: 150px;
  --medium-padding: 80px;
  --small-padding: 50px;
  
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 10px;

  --hero-banner-left-size: 400px;
  --hero-banner-right-size: 600px;
}


@media (max-width: 767px) {
  :root {
    --hero-banner-left-size: 200px;
    --hero-banner-right-size: 300px;
  }
}

@media (max-width: 479px) {
  :root {
    --hero-banner-left-size: 15px;
    --hero-banner-right-size: 300px;
  }
}

.container-fluid {
  padding-left: 8vw;
  padding-right: 8vw;
}

html { scroll-behavior: smooth; font-size: var(--html-font-size); }

body {
  font-family: var(--body-font-family);
  background-color: var(--plain-color);
  font-size: var(--body-font-size);
  color: var(--body-font-color);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font-family);
  font-weight: bold;
  line-height: 1.2;
  color: var(--heading-font-color);
}

h1, .mt-h1 {font-family:var(--heading-font-family); font-size:var(--heading-one-size); font-weight:var(--heading-font-weight);  color:var(--heading-font-color);}
h2, .mt-h2 {font-family:var(--heading-font-family); font-size:var(--heading-two-size); font-weight:var(--heading-font-weight);  color:var(--heading-font-color) ;margin-bottom:3rem;}
h3, .mt-h3 {font-family:var(--heading-font-family); font-size:var(--heading-three-size); color:var(--heading-font-color); font-weight:var(--heading-font-weight);}
h4, .mt-h4 {font-family:var(--heading-font-family); font-size:var(--heading-four-size); color:var(--heading-font-color); font-weight:var(--subheading-font-weight);}
h5, .mt-h5 {font-family:var(--heading-font-family); font-size:var(--heading-five-size); font-weight:var(--heading-font-weight); color:var(--heading-font-color);}
h6, .mt-h6 {font-family:var(--heading-font-family); font-size:var(--heading-six-size); font-weight:var(--heading-font-weight); color:var(--heading-font-color);}

p {margin-bottom:calc(var(--body-font-size) * 1.2); color:var(--body-font-color); text-align: justify;}
a { text-decoration: none; color: inherit; transition: color var(--transition); }
img { max-width: 100%; display: block; }

hr {position: relative; border: none; width: 100%; height: 1px; background: var(--secondary-color); opacity: 1; overflow: visible;} 
hr:after {content: url('../img/divider-shape.svg'); height: 30px; position: absolute; left: 50%; top: 50%; display: block; transform: translate(-50%, -50%); background: var(--light-color); padding: 0 10px;}

.mt-primary_bgr, .mt-dark_bgr {
  --body-font-color: var(--plain-color);
  --heading-font-color: var(--plain-color);
}

.mt-secondary_bgr {
  --body-font-color: var(--plain-color);
  --heading-font-color: var(--plain-color);
}

.mt-accent_bgr {
  --body-font-color: var(--plain-color);
  --heading-font-color: var(--plain-color);
}

.mt-light_bgr {
  --body-font-color: var(--dark-color);
  --heading-font-color: var(--primary-color);
}

.mt-primary_bgr {background: var(--primary-color); color: var(--body-font-color); }
.mt-secondary_bgr {background: var(--secondary-color);}
.mt-accent_bgr {background: var(--accent-color); color: var(--body-font-color); }
.mt-light_bgr {background: var(--light-color); color: var(--body-font-color);}
.mt-dark_bgr {background: var(--dark-color);}

.mt-exlarge_pt {padding-top: var(--exlarge-padding);}
.mt-exlarge_pb {padding-bottom: var(--exlarge-padding);}
.mt-large_pt {padding-top: var(--large-padding);}
.mt-large_pb {padding-bottom: var(--large-padding);}
.mt-medium_pt {padding-top: var(--medium-padding);}
.mt-medium_pb {padding-bottom: var(--medium-padding);}
.mt-small_pt {padding-top: var(--small-padding);}
.mt-small_pb {padding-bottom: var(--small-padding);}
.mt-pt_0 {padding-top: 0;}
.mt-pb_0 {padding-bottom: 0;}

@media (min-width: 768px) {
  .mt-large_md_pt {padding-top: var(--large-padding);}
  .mt-large_md_pb {padding-bottom: var(--large-padding);}
}

.mt-text_with_image {
  --hero-banner-left-size: 300px;
}
@media (max-width: 767px) {
  .mt-text_with_image {
    --hero-banner-left-size: 150px;
  }
}

@media (max-width: 479px) {
  .mt-text_with_image {
    --hero-banner-left-size: 80px;
  }
}

.mt-hero_banner_caption {
 --heading-two-size: var(--heading-one-size);
  --heading-font-color: var(--plain-color);
  --body-font-color: var(--plain-color);
  --body-font-size: 2rem;

  
}

.mt-hero_banner_description {
    --heading-three-size: calc(var(--heading-two-size) * 0.82);
    --heading-font-family: var(--body-font-family);
    --heading-font-weight: 500;
    --heading-font-color: var(--secondary-fade);
}

.mt-wrapper {contain: paint;}
@media (min-width: 768px) {
  .mt-section_100 {height: 80vh; position: relative;}
}
.mt-sticky {position: sticky; top: 0;}
.mt-has_accent_bgr {background-image: url('../img/pattern.svg'); background-repeat: repeat; background-size: cover;}

.mt-header {position: absolute; z-index: 99; width: 100%; padding-top: var(--header-padding-top); padding-bottom: var(--header-padding-bottom);}
.mt-site_logo {width: 250px;}
.mt-site_logo img {width: 100%;}
/* =========================================================
   HERO SECTION
   ========================================================= */
.mt-hero_banner {width: 100%; overflow: hidden; height: 100vh;}
.mt-has_overlay {position: relative;}
.mt-has_overlay:after {content: ''; position: absolute; left:0; top: 0; right:0; bottom: 0;  z-index: 2;}
.mt-primary_overlay:after {background: var(--primary-color);}
.mt-overlay_multiply:after {mix-blend-mode: multiply;}
.mt-overlay_color:after {mix-blend-mode: color;}
.mt-hero_banner_video {width: 100%; height: 100vh; position: relative; z-index: 1; aspect-ratio: 16/9; display: block; object-fit: cover;}
.mt-banner_shape_right {width: var(--hero-banner-right-size); height: auto; position: absolute; right: calc(var(--hero-banner-right-size) / 2 * -1); bottom: calc(var(--hero-banner-right-size) / 1.5 * -1); z-index: 3;}
.mt-banner_shape_left {width: var(--hero-banner-left-size); height: auto; position: absolute; left: calc(var(--hero-banner-left-size) / 3 * -1); bottom: calc(var(--hero-banner-left-size) / 1.65 * -1); z-index: 3;}
.mt-banner_shape_right_top {width: var(--hero-banner-left-size); height: auto; position: absolute; right: calc(var(--hero-banner-left-size) / 3 * -1); top: calc(var(--hero-banner-left-size) / 1.5 * -1); z-index: 3;}
.mt-banner_shape_primary {--primary-shape-size: 340px; --primary-shape-left: calc(var(--primary-shape-size) / 5 * -1); width: var(--primary-shape-size); height: auto; position: absolute; left: calc(var(--primary-shape-left) + var(--primary-shape-size) / 2); bottom: calc(var(--hero-banner-left-size) * 0.16); z-index: 3;}
.mt-banner_shape_secondary {width: var(--hero-banner-left-size); height: auto; position: absolute; right: calc(var(--hero-banner-left-size) / 2 * -1); bottom: calc(var(--hero-banner-left-size) * 0.12); z-index: 3;}
.mt-hero_banner_caption {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;}

.mt-intro_section {--primary-shape-left: calc(var(--hero-banner-left-size) / 3 * -1); position: relative; z-index: 2;}
.mt-intro_pic_1 {width: var(--hero-banner-left-size); height: auto; position: absolute; left: calc(var(--hero-banner-left-size) - var(--hero-banner-left-size) * .3); top: calc(var(--hero-banner-left-size) / 1.87 * -1)}
.mt-intro_pic_2 {width: var(--hero-banner-left-size); height: auto; position: absolute; left: calc(var(--primary-shape-left) + var(--hero-banner-left-size) / 2); top: calc(var(--hero-banner-left-size) * 0.12);}
.mt-two_col {display: grid; gap: 30px;}

@media (min-width: 982px) {
    .mt-two_col {grid-template-columns: repeat(2, 1fr);}
}


.mt-text_with_image .container-xl {position: relative; z-index: 3;}

.mt-image_col img {width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3;  }
.mt-has_leaf_left_top {position: relative;}
.mt-has_leaf_right_bottom:before {content: url('../img/leaf-top-accent.svg'); position: absolute; left: 0; top: -100px; z-index: 1; opacity: 0.2;}
.mt-has_leaf_right_bottom:after {content: url('../img/leaf-bottom-accent.svg'); position: absolute; right: 0; bottom: -100px; z-index: 1; opacity: 0.2;}
@media (min-width: 768px) {
  .mt-image_col {width: 40%; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden;}
  .mt-image_col img {width: 100%; height: 100%; object-fit: cover;  }
  .mt-content_col {width: 60%; position: absolute; left: 0; top:0; bottom: 0; overflow: hidden;}
}

.mt-map_wrap {max-height: 100%; max-width: 100%;}
.mt-map_wrap svg {width: auto; height: auto; max-height: 100%;}
.mt-project_wrap {border-radius: var(--radius); padding: 30px; margin-right: 4rem;}
.mt-project_title {margin-bottom: 3rem;}
.mt-project_region {margin-bottom: 2rem;}
.mt-project_details ul {margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem;}
.mt-project_details ul li {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;;}

/* Region panels: hide both by default, show the active one */
/* single always-visible panel — no display toggling needed */

/* =========================================================
   FOOTER
   ========================================================= */

.mt-footer {background-image: url('../img/footer-pattern.svg'); background-repeat: no-repeat; background-size: 100% auto; background-position: bottom center; position: relative;}
.mt-footer:before {content:''; width: 100%; height: 100%; background: url('../img/footer-pattern-top.svg'); background-repeat: no-repeat; background-position: top center; position: absolute; top: 0; pointer-events: none;}
.mt-footer .container-xl {position: relative; z-index: 2;}
.mt-footer_logo {margin-bottom: 2rem;}
.mt-footer_logo img {width: 250px;}




.mt-footer_tagline {
  font-size: 1.4rem;
  margin-top: 1rem;
  max-width: 240px;
}

.mt-footer_social {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.mt-social_link {
  width: 30px; 
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plain-color);
}

.mt-social_link svg {
  width: 100%;
  height: 100%;
}



.mt-widget_title {color: var(--plain-color); margin-bottom: 1.5rem;}

.mt-footer_links {
  list-style: none;
  padding: 0;
}

.mt-footer_links li { margin-bottom: 0.65rem; }

.mt-footer_links a {
  color: var(--plain-color);
  transition: color var(--transition), padding-left var(--transition);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--white);
  padding-left: 4px;
}

.mt-footer_bottom {
  margin-top: var(--small-padding);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 1.5rem 0;
}

.footer-copyright {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  transition: color var(--transition);
}

.footer-bottom-links a:hover {
  color: var(--muted-gold);
}

.mt-footer_contact {display: flex; gap: 2rem}
.mt-footer_contact a {display: flex; align-items: center; gap: 1rem; color: var(--plain-color);}
.mt-footer_contact a svg {width: 25px; height: 25px;}
.mt-partner_logo {max-width: 240px; margin-right: auto;}
.mt-copyright {color: var(--plain-color);}
/* =========================================================
   SCROLL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }

/* =========================================================
   KEYFRAME ANIMATIONS
   ========================================================= */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* =========================================================
   PROJECT SECTION — full-bleed white card (press releases)
   ========================================================= */

/* =========================================================
   MAP SECTION — 2-column layout (map+intro | right panel)
   ========================================================= */

.mt-section.mt-primary_bgr {
  position: relative;
}

.mt-map_wrap { position: relative; overflow: visible; }
.mt-map_wrap svg {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  display: block;
}

/* Right-side panel styles */
.mt-section.mt-primary_bgr .mt-project_wrap {
  height: 100%;
  border-radius: 24px 24px 0 0;
  overflow-y: auto;
  padding: 40px 32px;
}

.mt-section.mt-primary_bgr .mt-info_panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mt-section.mt-primary_bgr .mt-info_panel ul li {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(20, 71, 81, 0.18);
  align-items: center;
  font-family: var(--heading-font-family), 'Greta Arabic', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.mt-section.mt-primary_bgr .mt-info_panel ul li:last-child {
  border-bottom: 1px solid rgba(20, 71, 81, 0.18);
}

.mt-section.mt-primary_bgr .mt-project_region {
  display: block;
  background: var(--primary-color, #144751);
  color: var(--light-color, #fbf9ee);
  padding: 10px 24px;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-family: var(--heading-font-family), 'Greta Arabic', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
}

.mt-section.mt-primary_bgr .mt-project_content p {
  padding: 1rem 0;
  border-top: 1px solid rgba(20, 71, 81, 0.18);
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
}

.mt-section.mt-primary_bgr .mt-project_content p:last-child {
  border-bottom: 1px solid rgba(20, 71, 81, 0.18);
}

.mt-section.mt-primary_bgr .mt-stat_big {
  font-size: 1em !important;
  font-weight: 700;
}


/* --- Info panel fade transition between tab switches --- */
.mt-info_panel { transition: opacity 0.3s ease; }
.mt-info_panel.mt-fade_out { opacity: 0; }

/* --- Map region states --- */
.mt-map_wrap svg path[id^="SA-"] {
  transition: fill 0.25s ease;
}

/* Clickable regions (الباحة, المدينة/ينبع) — lighter than the default
   #144751 so users notice they're interactive. */
.mt-map_wrap svg path.mt-region_clickable {
  fill: #226572 !important;
  cursor: pointer;
}

.mt-map_wrap svg path.mt-region_clickable:hover {
  fill: #3e8593 !important;
}

/* Active region — no pointer cursor since it's already selected */
.mt-map_wrap svg path[id^="SA-"].mt-region_active {
  fill: #5a9095 !important;
  cursor: default !important;
}

/* When the destination section is active and Baha is selected, the OTHER
   clickable region (Yanbu/Madinah) pulses slowly to hint it's clickable.
   Same idea in reverse when Yanbu is selected. */
.mt-section.mt-primary_bgr.is-active[data-active-tab="baha"] .mt-map_wrap svg path#SA-03:not(.mt-region_active),
.mt-section.mt-primary_bgr.is-active[data-active-tab="yanbu"] .mt-map_wrap svg path#SA-11:not(.mt-region_active) {
  animation: mt-region_blink 2.6s ease-in-out infinite;
}

@keyframes mt-region_blink {
  0%, 100% { fill: #226572 !important; }
  50%      { fill: #4a8085 !important; }
}

/* --- Map marker dots and connector line --- */
.mt-marker_halo {
  fill: rgba(255, 255, 255, 0.18);
  animation: mt-marker-pulse 2s ease-in-out infinite;
}
.mt-marker_pulse {
  fill: rgba(255, 255, 255, 0.35);
}
.mt-marker_dot {
  fill: #fff;
}
@keyframes mt-marker-pulse {
  0%, 100% { opacity: 0.4; r: 22px; }
  50%       { opacity: 0.8; r: 26px; }
}






.mt-info_panel ul li .mt-stat_big {
  font-size: 1em;
  font-weight: 700;
  color: var(--light-color, #fbf9ee);
}


/* Section blurb (descriptive paragraph below the stats) */
.mt-section_blurb {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 460px;
}

.mt-news_section {position: relative;}
.mt-news_section:after {content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--dark-color); opacity: 0.5; mix-blend-mode: multiply;}
.mt-news_section .container-xl {position: relative; z-index: 2;}
.mt-blog_card {--heading-font-family: var(--body-font-family); padding: 0 10px;}
.mt-blog_pic {border-radius: 16px; overflow:hidden; margin: 0 0 30px;}
.mt-blog_title {padding:0 20px;}

/* =========================================================
   TEAM SECTION — Board / Executives / The Team
   Copper background + traditional pattern (inherited from
   .mt-accent_bgr + .mt-has_accent_bgr). Cards have a cream
   diamond ornament sitting behind each portrait's torso.
   ========================================================= */

.mt-team_section {
  position: relative;
}



/* ---- Carousel layout: arrows + cards ---- */
.mt-team_carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.mt-team_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  flex: 1;
  max-width: 1100px;
}

/* ---- Individual team card ---- */
.mt-team_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--light-color, #fbf9ee);
}

/* Photo wrapper: fixed aspect ratio so all three cards are visually
   identical in size regardless of each portrait's native dimensions. */
.mt-team_photo {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  margin: 0 auto 1.25rem;
}

/* Cream diamond ornament — a true rhombus (rotated square) sitting behind
   the portrait. Top tip pokes above the head, left/right tips beside the
   shoulders, bottom tip just below the visible torso (which now has 6%
   bottom padding in the PNG so the tip can show through). */
.mt-team_photo_::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  aspect-ratio: 1 / 1;
  background: var(--light-color, #fbf9ee);
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center center;
  z-index: 0;
  pointer-events: none;
}

/* Image fills the wrapper, contained so the whole person stays visible.
   Anchored to bottom-center so torsos align across all three cards. */
.mt-team_photo img {
  position: relative;
  z-index: 1;          /* portrait sits in front of the diamond */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ---- Name + role ---- */
.mt-team_name {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  font-weight: 700;
  color: var(--light-color, #fbf9ee);
  line-height: 1.2;
}

.mt-team_role {
  margin: 0.35rem 0 0;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  font-weight: 400;
  color: var(--light-color, #fbf9ee);
  opacity: 0.92;
}

/* ---- Carousel arrows (dark teal circles with white chevrons) ---- */
.mt-team_arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-color, #144751);
  color: var(--light-color, #fbf9ee);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(20, 71, 81, 0.18);
}

.mt-team_arrow:hover {
  transform: scale(1.06);
  background: #0f3a44;
}

.mt-team_arrow svg {
  width: 22px;
  height: 22px;
}

/* ---- Responsive: stack on small screens, hide arrows ---- */
@media (max-width: 767px) {
  .mt-team_tabs {
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .mt-team_grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .mt-team_arrow {
    display: none;
  }
}

/* ---- Hamburger button ---- */
/* =========================================================
   NAVBAR — desktop pill + drawer
   ========================================================= */

/* ---- Desktop pill nav ---- */
.mt-desktop_nav {
  padding: 10px 32px;
  border-radius: 4rem;
  background: var(--plain-color);
}
.mt-desktop_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
}
.mt-desktop_nav ul li a {
  font-family: var(--body-font-family);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.mt-desktop_nav ul li a:hover {
  color: var(--secondary-color, #2e7d6b);
}

/* ---- Header right-side controls ---- */
.mt-header_controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================================================
   HAMBURGER — always visible
   ========================================================= */
.mt-nav_toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  z-index: 101;
  backdrop-filter: blur(6px);
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.mt-nav_toggle:hover {
  background: rgba(255,255,255,0.28);
}
.mt-nav_toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--plain-color);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ---- Drawer nav — all screen sizes ---- */
.mt-main_navigation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80vw;
  max-width: 360px;
  background: var(--primary-color);
  z-index: 100;
  padding: 90px 36px 40px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  box-shadow: -6px 0 30px rgba(0,0,0,0.25);
  overflow-y: auto;
}
.mt-main_navigation.is-open {
  transform: translateX(0);
}
.mt-main_navigation ul {
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.mt-main_navigation ul li a {
  display: block;
  padding: 16px 0;
  font-size: 1.8rem;
  color: var(--plain-color);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  transition: color var(--transition), padding-right var(--transition);
}
.mt-main_navigation ul li a:hover {
  color: rgba(255,255,255,0.7);
  padding-right: 8px;
}

/* ---- Close button inside drawer ---- */
.mt-nav_close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: background var(--transition);
}
.mt-nav_close:hover {
  background: rgba(255,255,255,0.22);
}
.mt-nav_close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--plain-color);
  border-radius: 2px;
}
.mt-nav_close span:first-child { transform: rotate(45deg); }
.mt-nav_close span:last-child  { transform: rotate(-45deg); }

/* ---- Overlay backdrop when nav is open ---- */
body.nav-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */
.mt-lang_switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 4rem;
  padding: 4px 14px;
  backdrop-filter: blur(6px);
}
.mt-lang_btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--body-font-family);
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  padding: 2px 4px;
  transition: color var(--transition);
  letter-spacing: 0.03em;
}
.mt-lang_btn.active,
.mt-lang_btn:hover {
  color: var(--plain-color);
}
.mt-lang_divider {
  color: rgba(255,255,255,0.3);
  font-size: 1.2rem;
  line-height: 1;
}

/* =========================================================
   PHILOSOPHY BULLETS
   ========================================================= */
.mt-philosophy_bullets {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 2rem;
}
.mt-philosophy_bullets li {
  font-family: var(--heading-font-family);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: bold;
  color: var(--plain-color);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mt-philosophy_bullets li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary-color);
  flex-shrink: 0;
}

/* =========================================================
   TEAM GROUP LABEL SLIDE
   ========================================================= */
.swiper-slide.mt-team_group_slide {
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 1.6rem;
}
.mt-team_group_label {
  font-family: var(--heading-font-family);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: bold;
  color: var(--plain-color);
  position: relative;
  padding-bottom: 0.8rem;
}
.mt-team_group_label::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: 2px;
}


/* =========================================================
   TEAM CARD — category label above photo
   ========================================================= */
.mt-team_category {
  font-family: var(--heading-font-family);
  font-size: var(--heading-four-size);
  font-weight: bold;
  color: var(--plain-color);
  margin: 0 0 1.2rem;
  text-align: right;
}

/* =========================================================
   PHILOSOPHY TABS
   ========================================================= */

/* Stack all images — fade between them */
.mt-philosophy_section {
  position: relative;
}
/* Mobile: images stack in flow, only active shows */
.mt-phil_img {
  display: none;
}
.mt-phil_img.active {
  display: block;
}
/* Desktop: images are absolute overlays (section has fixed height from .mt-section_100) */
@media (min-width: 768px) {
  .mt-phil_img {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
  .mt-phil_img.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Tab nav row — sits below paragraph */
.mt-phil_tabs {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-top: 3.2rem;
}
.mt-phil_tab {
  background: none;
  border: none;
  padding: 1.4rem 2rem;
  font-family: var(--body-font-family);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: bold;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
  letter-spacing: 0.02em;
}
.mt-phil_tab:hover {
  color: rgba(255,255,255,0.85);
}
.mt-phil_tab.active {
  color: var(--plain-color);
}

/* Panels — fade in/out */
.mt-phil_panel {
  display: none;
}
.mt-phil_panel.active {
  display: block;
  animation: mt-panel-fade 0.45s ease forwards;
}
@keyframes mt-panel-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   MAP SECTION — intro block below map + read-more button
   ========================================================= */

.mt-map_wrap {
  width: 100%;
}

.mt-map_intro {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.mt-map_intro p {
  color: rgba(255,255,255,0.75);
  font-size: clamp(1.4rem, 1.6vw, 1.7rem);
  line-height: 1.8;
  margin-top: 1.2rem;
  margin-bottom: 2rem;
}

.mt-read_more {
  display: inline-block;
  padding: 1rem 2.4rem;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--plain-color, #fbf9ee);
  font-family: var(--heading-font-family);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s;
}

.mt-read_more:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}

/* =========================================================
   MAP SECTION — right side content panel
   ========================================================= */
#mtPressCard {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.mt-project_thumb {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mt-project_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mt-project_body {
  padding: 2.4rem 0;
}

.mt-project_region {
  display: inline-block;
  background: var(--primary-color, #144751);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  margin-bottom: 1.2rem;
}

.mt-project_title {
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--primary-color, #144751);
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.mt-project_content p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 1rem;
}

.mt-project_stats {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(20,71,81,0.12);
}

.mt-project_stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(20,71,81,0.12);
  font-size: 1.4rem;
}

.mt-stat_label {
  color: #666;
  font-weight: 500;
}

.mt-stat_value {
  color: var(--primary-color, #144751);
  font-weight: 700;
  text-align: left;
}

.mt-stat_value.mt-stat_big {
  font-size: 1.6rem;
  color: var(--secondary-color, #c8a96e);
}

/* ===== STATS COUNTER SECTION ===== */
.mt-stats_counter_section {
  background: var(--primary-color);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  direction: rtl;
}

.mt-stats_counter_section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(166,130,74,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.mt-stats_inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.mt-stat_divider {
  width: 20px;
  margin: 1rem 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mt-stat_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 4rem;
  cursor: default;
  position: relative;
  transition: background 0.35s ease;
  border-radius: 0.8rem;
}




.mt-stat_icon {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: rgba(166,130,74,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-color);
  margin-bottom: 2rem;
  transition: background 0.35s ease, transform 0.35s ease;
}

.mt-stat_item:hover .mt-stat_icon {
  background: var(--secondary-color);
  color: #fff;
  transform: scale(1.1) rotate(-5deg);
}

.mt-stat_icon svg {
  width: 2.6rem;
  height: 2.6rem;
}

.mt-stat_number_wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.mt-stat_number {
  font-family: "DM Sans", sans-serif ;
  font-size: 7rem;
  font-weight: 700;
  color: var(--plain-color);
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}

.mt-stat_item:hover .mt-stat_number {
  transform: scale(1.05);
}

.mt-stat_suffix {
  font-family: var(--heading-font-family);
  font-size: 4rem;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1;
}

.mt-stat_label {
  font-family: var(--heading-font-family);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.2rem;
}

.mt-stat_desc {
  font-family: var(--body-font-family);
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 24rem;
}

/* Animated progress ring on hover */
.mt-stat_item.is-counted .mt-stat_number {
  animation: mt-pop 0.3s ease;
}

@keyframes mt-pop {
  0%   { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Responsive */
@media (max-width: 991px) {
  .mt-stats_inner {
    flex-direction: column;
    gap: 0;
  }
  .mt-stat_divider {
    width: auto;
    height: 1px;
    margin: 0 4rem;
  }
  .mt-stat_item {
    padding: 3.5rem 2rem;
  }
  .mt-stat_number {
    font-size: 6rem;
  }
}
/* ===== END STATS COUNTER SECTION ===== */

/* ===== REGION TAB BAR (below map) ===== */
.mt-region_tabbar {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  margin-top: -2px;
}

.mt-region_tab {
  flex: 1;
  padding: 1.4rem 2rem;
  background: var(--primary-fade);
  color: rgba(255,255,255,0.7);
  font-family: var(--body-font-family);
  font-size: 1.7rem;
  font-weight: 500;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  position: relative;
  letter-spacing: 0.02em;
}

.mt-region_tab:not(:last-child) {
  border-left: 1px solid rgba(255,255,255,0.08);
}

.mt-region_tab:hover {
  background: var(--dark-color);
  color: #fff;
}

.mt-region_tab.is-active {
  background: var(--dark-color);
  color: #fff;
  font-weight: 700;
}

.mt-region_tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.2rem;
  height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
}
/* ===== END REGION TAB BAR ===== */