/*
Theme Name: MTR
Theme URI: https://example.com/mtr
Author: Professional Developer
Description: Custom WordPress theme for the MTR Hung Shui Kiu Station Project.
Version: 1.0.0
Text Domain: mtr
*/

@font-face {
    font-family: "Noto_Sans_TC";
    src: url("/wp-content/themes/MTR_HSK/assets/fonts/Noto_Sans_TC/NotoSansTC-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}   
@font-face {
    font-family: "Noto_Sans_TC_thin";
    src: url("/wp-content/themes/MTR_HSK/assets/fonts/Noto_Sans_TC/NotoSansTC-Thin.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap; 
}  

:root {
    --base-font-size: 100%; 
    --mtr-red: #da291c;
    --primary-teal: #009541;
    --primary-blue: #0072bc;
    --gradient-brand: linear-gradient(135deg, #0072bc 0%, #00a680 100%);
    --bg-light: #f8f9fa;
    --text-dark: #505050;
    --text-muted: #666666;
    --font-main: 'Noto_Sans_TC', 'Microsoft JhengHei', sans-serif;
    --border-color: #e0e0e0;
    --title-color: #0074b7;
    --basic-font-size: 1rem;
    --xs-font-size: .8rem;
    --title-font-size: 2rem;
    --desc-font-size: 1.89rem;
    --mtitle-font-size: 1.575rem;
    --stitle-font-size: 1.3rem;
    --xstitle-font-size: 1.2rem;
    --normal-font-size: 1.125rem;
    --h1-font-size: 3.125rem;
    --hero-title: 3.75rem;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.council-table-wrap::-webkit-scrollbar {
  display: none;
}
.posted-on {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.council-table-wrap {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@media only screen and (min-width: 1920px) {
    :root {
        --title-font-size: 2.5rem;
        --mtitle-font-size: 1.875rem;
        --stitle-font-size: 1.5rem;
        --normal-font-size: 1.125rem;
        
    }
}
@media only screen and (max-width: 992px) {
    :root {
        --title-font-size: 2.5rem;
        --mtitle-font-size: 1.875rem;
        --stitle-font-size: 1.5rem;
        --normal-font-size: 1.125rem;
        --hero-title: 2.625rem;
    }
}

html {scroll-behavior: smooth;font-size: var(--base-font-size);scroll-padding-top: 120px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); color: var(--text-dark); line-height: 1.6; background-color: #ffffff; }

.container { width: 100%;
    max-width: 1480px;
    margin: 0 auto;
        padding: 0 15px;
    
}
.title-container {
    max-width: 1920px;
    padding: 0 80px; 
}
.site-header .container {
    max-width: 100%;
    padding:0px 10px;
} 
a { text-decoration: none; color: var(--primary-blue); transition: all 0.3s ease; }
h2 {
    font-size: var(--title-font-size);
}
h2, h3 {
    font-weight: normal;
}
.home-icon {
    width:22px;
    height:22px;
}
.text-mtr-blue {
    color:#0074b7;
}
.font-size-btn {
    display: flex;
    align-items: baseline;
    gap: 5px;    
}
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  background-color: #53d07e;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 100%;
}

#backToTopBtn:hover {
  background-color: #000;
}
/* #00597f */
/* Temporary fix to hide the Uncategorized filter tab */
[data-filter="uncategorized"], 
[data-filter=".uncategorized"],
[data-filter="uncategorized-zh"] {
    display: none !important;
}
/* ==========================================================================
   HEADER NAVIGATION & MEGA MENU
   ========================================================================== */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    max-width: 100%;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: relative;
    min-height: 100px;
    align-items: center;    
}

.header-logos { display: flex; align-items: center; gap: 30px; }
.header-logos img { height: 40px; object-fit: contain; }
.header-logos .logo-newlines img {height:58px;}
.main-navigation {
    margin: 0 auto;
}
.main-navigation .menu-item-wrapper {
    display: flex;
    align-items: start;
    gap: 10px;
}
/* Play Button Overlay for Video News Cards */
.news-img-wrap, .card-image {
    position: relative; /* Ensures the overlay stays inside the image wrapper */
}

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none; /* Ensures the user can still click the link beneath it */
    transition: all 0.3s ease;
    z-index: 2;
}

/* Hover effect on the card scales the play button slightly */
.news-card-item:hover .play-icon-overlay,
.news-card:hover .play-icon-overlay {
    background-color: #1a9e52; /* Changes to your brand green on hover */
    border-color: #1a9e52;
    transform: translate(-50%, -50%) scale(1.1);
}
.news-title-link .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Change this number to limit to 1, 2, or 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.play-icon-overlay svg {
    width: 24px;
    height: 24px;
    margin-left: 4px; /* Optically centers the triangle */
}
/* ==========================================================================
   HEADER NAVIGATION & MEGA MENU
   ========================================================================== */
@media (min-width: 1025px) {
    .site-header::after {
        content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 0;
        background-color: #ffffff; box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        z-index: 990; transition: height 0.3s ease, opacity 0.3s ease;
        opacity: 0; visibility: hidden; pointer-events: none;
    }
    .site-header:hover::after { height: 320px; opacity: 1; visibility: visible; pointer-events: auto; }

    html[lang="en-GB"] .site-header:hover::after { height: 450px; opacity: 1; visibility: visible; pointer-events: auto; }

    .main-navigation > ul {
        display: flex;
        width: 100%; max-width: 1200px; margin: 0; list-style: none; gap: 20px;
    }
    .main-navigation > ul > li { text-align: center; position: relative; width:155px; }
    html[lang="en-GB"] .main-navigation > ul > li { width:180px; }
    .main-navigation > ul > li > a {
        display: inline-flex; flex-direction: column; align-items: center;
        padding-top: 10px; border-top: 1px solid #d1d1d1;
        font-weight: bold; color: var(--text-dark); font-size: 1rem;
        width:100%;
    }
    html[lang="en-GB"] .main-navigation > ul > li > a { font-size: .9rem; }
    .main-navigation > ul > li > a:hover { color: var(--primary-teal); border-top: 1px solid var(--primary-teal); }

    .main-navigation .sub-menu {
        position: absolute; top: 100%; left: 0; width: 100%; padding: 30px 20px;
        display: grid; grid-template-columns: repeat(5, 1fr); z-index: 999; margin: 0;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
    }
    .main-navigation > ul > li > .sub-menu { display: grid; grid-template-columns: repeat(1, 1fr); }
    .main-navigation .sub-menu > li { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom:20px;}
    .site-header:hover .sub-menu { opacity: 1; visibility: visible; }
    
    .main-navigation .sub-menu a { font-size: .9rem; font-weight: normal; color: #888888; border: none; text-align: center; transition: color 0.2s ease; padding: 0; }
    .main-navigation .sub-menu a:hover { color: var(--primary-blue); }

    .menu-item-icon { width: 32px; height: 32px; margin-bottom: 8px; object-fit: contain; }

    .mega-menu-utilities {
        position: absolute; top: 100%; right: 20px; padding-top: 25px; z-index: 999;
        display: flex; align-items: center; gap: 20px;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
    }
    .site-header:hover .mega-menu-utilities { opacity: 1; visibility: visible; }
    
    .mega-menu-utilities a, .mega-menu-utilities button, .language-selector li a {
        font-size: 14px; color: #999999; background: none; border: none; cursor: pointer;
        text-transform: uppercase; font-weight: 400; letter-spacing: 0.5px; padding: 0; transition: color 0.2s ease;
    }
    .mega-menu-utilities a:hover, .mega-menu-utilities button:hover, .language-selector li a:hover { color: var(--primary-teal); }
    .language-selector ul { list-style: none; margin: 0; padding: 0; display: flex; }
    .mobile-menu-toggle { display: none; }
}

/* ==========================================================================
   MOBILE HEADER & MENU FALLBACK
   ========================================================================== */
@media (max-width: 1024px) {
    .header-logos { gap: 15px; }
    .header-logos img { height: 35px; }
    
    .mobile-menu-toggle {
        display: flex; background: transparent; border: none; cursor: pointer;
        flex-direction: column; gap: 6px; padding: 10px; z-index: 1100;
    }
    .mobile-menu-toggle span { display: block; width: 30px; height: 3px; background-color: var(--primary-teal); border-radius: 2px; transition: all 0.3s ease; }
    .mobile-menu-toggle.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .main-navigation {
        position: absolute; top: 100%; left: 0; width: 100%; background-color: #ffffff;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-top: 1px solid var(--border-color);
        opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000;
    }
    .main-navigation.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
    .main-navigation ul { display: flex; flex-direction: column; gap: 0; padding: 10px 20px 30px; list-style: none; margin: 0; }
    .main-navigation > ul > li { border-bottom: 1px solid #f0f0f0; width: 100%; }
    .main-navigation a { padding: 15px 0; display: flex; align-items: center; font-size: var(--normal-font-size); color: var(--text-dark); }
    .menu-item-icon { width: 24px; height: 24px; margin-right: 15px; margin-bottom: 0; }
    
    .main-navigation .sub-menu { display: none; padding-left: 20px; background-color: #f8f9fa; border-top: 1px solid #f0f0f0; margin-top: 5px; }
    .main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { display: block; }
    .main-navigation .sub-menu a { font-size: 15px; padding: 10px 0; border: none; color: var(--text-muted); }

    .mega-menu-utilities {
        display: flex; justify-content: center; align-items: center; padding: 20px; gap: 25px;
        border-top: 1px solid var(--border-color); margin-top: 10px;
    }
    .mega-menu-utilities a, .mega-menu-utilities button, .language-selector li a {
        background: transparent; border: none; font-size: 14px; color: var(--text-muted); text-transform: uppercase;
    }
    .language-selector ul { list-style: none; margin: 0; padding: 0; }
}
@media (max-width: 576px) { .header-logos img { height: 25px; } }

/* ==========================================================================
   HERO SECTION (3-Part Left, 2-Part Right)
   ========================================================================== */
.hero-section-wrapper {
    position: relative; width: 100%; height: 100vh; overflow: hidden;max-height:80vh;
}
.decor-shape { position: absolute; pointer-events: none; }
.decor-img { display: block; width: 100%; height: auto; }
.decor-shape.decor-tr-green {
        right: 0px;
        width: 5%; 
        height: auto;

}
/* 3-Part Left Side */
.decor-left-top-01 {
    /* top: 0; left: 0; z-index: 10; opacity: 0;
    animation: fadeDownHero 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50%;
    background: #fff;
    z-index: 4;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;    
}
.decor-left-top {
    /* top: 0; left: 0; z-index: 10; opacity: 0;
    animation: fadeDownHero 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px;
    height: 50%;
    background: linear-gradient(180deg,rgba(14, 70, 53, 1) 0%, rgba(25, 166, 88, 1) 50%);
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;    
}
.decor-left-middle .decor-img {
    width:90%;
}
.decor-left-middle {
    bottom: 5%; left: 0; z-index: 12; opacity: 0; pointer-events: auto;
    animation: fadeUpHero 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}
.decor-left-bottom {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 400px;
    height: 50%;
    background: #fff;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;   
}
.decor-left-bottom-02 {
    position: absolute;
    bottom: 49%;
    left: 350px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;   
}

.hero-title-text {
    position: absolute; top: 40%; transform: translateY(-50%); color: #ffffff; width: 90%; z-index: 13; text-align: center;
}
/* --------------------------------------------------------------------------
   HERO TITLE TEXT & PREMIUM ANIMATION
   -------------------------------------------------------------------------- */
html[lang="en-GB"] .hero-title-text.front-title h2 { font-size:var(--title-font-size);padding:0px 20px; }

html[lang="en-GB"] .filter-btn {
    font-size: var(--basic-font-size);
    width:70%;
}

.hero-title-text h2 {
    font-size: var(--hero-title);
    line-height: 1.3;
    letter-spacing: 2px;
    margin: 0;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    /* Animation Start State */
    opacity: 0;
    
    /* Play the animation with a premium cubic-bezier easing curve */
    animation: revealPremiumText 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* 0.4s delay lets the green and blue background blobs animate in first */
    animation-delay: 0.4s; 
}

/* The Reveal Keyframes */
@keyframes revealPremiumText {
    0% {
        opacity: 0;
        transform: translateY(60px); /* Starts 60px lower */
        /* Hides the text by pulling a mask all the way down to the bottom */
        clip-path: inset(100% 0 0 0); 
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Rests in its original position */
        /* Opens the mask entirely. We use -20px to ensure your text-shadow doesn't get cut off! */
        clip-path: inset(-20px -20px -20px -20px); 
    }
}

/* 2-Part Right Side */
.decor-hero-right-top {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 150px;
    height: 50%;
    background: #fff;
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-hero-right-top-02 {
    position: absolute;
    top: 50%;
    right: 100px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-hero-right-bottom {
    position: absolute;
    bottom: -1px;
    right: 0px;
    width: 100px;
    height: 50%;
    background: linear-gradient(180deg,rgba(0, 116, 183, 1) 0%, rgba(0, 89, 127, 1) 100%);
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-hero-right-bottom-02 {
    position: absolute;
    bottom: 50%;
    right: 0px;
    width: 100px;
    height: 20%;
    background: linear-gradient(180deg,rgba(25, 166, 88, 1) 60%, rgba(14, 70, 53, 1) 100%);
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-right-svg {
    position: absolute;
    bottom: 49%;
    right: 0px;
    width: 100px;
    height: 100px;
    background: linear-gradient(180deg,rgba(25, 166, 88, 1) 60%, rgba(14, 70, 53, 1) 100%);
    z-index: 4;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-hero-right-bottom-03 {
    position: absolute;
    bottom: 69%;
    right: 0px;
    width: 100px;
    height: 100px;
    background: linear-gradient(180deg,rgba(25, 166, 88, 1) 60%, rgba(25, 166, 88, 1) 100%);
    z-index: 4;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 1s;  
    border-radius: 100% 0px 0px 0px;
}

/* Banner Core */
.hero-banner.constrained { width: 100%;; height: 100%; position: relative; }
.hero-media { width: 100%; height: 100%; position: relative; }
.hero-media img, .hero-video-player { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes fadeDownHero { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeUpHero { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   HERO SLIDER & PLAY BUTTON
   ========================================================================== */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Force Play Button to Absolute Center */
.hero-slide .play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 100;
}
.play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999; /* Maximum priority */
    pointer-events: auto;
}

.play-btn:hover {
    background: var(--primary-teal);
    border-color: var(--primary-teal);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-btn svg {
    width: 35px; height: 35px;
    margin-left: 5px; /* Optically center the play triangle */
}

.slider-dots {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 999; /* Maximum priority */
    display: flex; 
    gap: 15px; /* Slightly more space for easier clicking */
    pointer-events: auto; /* Force clickability */
}
.hero-banner .slider-dots {
    justify-content: center;
}
.slider-dot {
    width: 14px; /* Slightly larger for better clicking */
    height: 14px;
    border-radius: 50%;
    cursor: pointer; 
    transition: all 0.3s ease;
    padding: 0;
    display: block;
    background: transparent;
    border: 2px solid #ffffff;    
}

.slider-dot:hover {
    background: #ffffff;
    border: 2px solid #ffffff;
    /* transform: scale(1.2); */
}

.slider-dot.active {
    background: #ffffff;
    /* transform: scale(1.3); */
}

/* ==========================================================================
   VIDEO LIGHTBOX MODAL
   ========================================================================== */
.video-lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-lightbox.is-active {
    opacity: 1; visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-container {
    position: relative;
    width: 90%; max-width: 1440px;
    aspect-ratio: 16/9;
    z-index: 2;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.video-lightbox.is-active .lightbox-container {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: -40px; right: 0;
    background: transparent; border: none;
    color: #ffffff; font-size: var(--title-font-size); line-height: 1;
    cursor: pointer; transition: color 0.3s;
}

.lightbox-close:hover { color: var(--primary-teal); }

.lightbox-video-wrapper {
    width: 100%; height: 100%; background: #000000;
}

.lightbox-video-wrapper iframe,
.lightbox-video-wrapper video {
    width: 100%; height: 100%; display: block;
}

/* .section-title-wrap { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.title-decorator { width: 25px; height: 25px; background: linear-gradient(135deg, #0072bc, #00a680); border-radius: 4px 12px 4px 4px; }
.decorator-light { background: #00a680; } */
.section-title-wrap { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 30px; 
}
.section-title-wrap h3 {
    font-size: var(--title-font-size);
    color: var(--title-color);
}

.title-decorator { 
    width: 42px; /* Adjust this slightly if the image needs to be bigger/smaller */
    height: 43px; 
    background-image: url('assets/images/title-tag.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* Overrides the old gradient/solid colors */
    border-radius: 0; /* Clears the old corner shaping */
}

/* Clear out the solid color from the light variant so the image shows through */
.decorator-light { 
    background-color: transparent; 
}

/* ==========================================================================
   STATION BUILD SECTION
   ========================================================================== */
.station-build { position: relative; padding: 0px; overflow: hidden; }
.decor-second-right-top { 
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 220px;
    background: linear-gradient(to bottom, #0e4635 30px, #1a9e52);
    border-radius: 0px 0px 80px 0px;
    z-index: 3;       
 }
.decor-second-right-bottom { 
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;       
 }
 .decor-second-right-bottom-1 { 
    position: absolute;
    bottom: 0px;
    right: 100px;
    width: 50px;
    height: 50px;
    background: #fff;
    z-index: 3;       
 }
 .decor-second-right-bottom-2 { 
    position: absolute;
    bottom: 50px;
    right: 100px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;       
 } 
 .decor-second-left-bottom {
    position: absolute;
    bottom: 0px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: linear-gradient(to top, #0e4635 10px, #1a9e52);
    z-index: 3;     
 }
 .decor-second-left-top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
 }
 .decor-second-left-top-feature {
    position: absolute;
    top: -50px;
    left: 0px;
    width: 50px;
    height: 100px;
    background: #00b7fe;
    z-index: 3;      
 }
 .decor-second-left-top-feature-2 {
    position: absolute;
    top: -100px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;      
 } 
  .decor-second-right-bottom-feature {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 50px;
    height: 200px;
    background: #00b7fe;
    z-index: 3;      
 }
  .decor-second-right-bottom-feature-2 {
    position: absolute;
    bottom: 0px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;      
 } 
 .decor-second-left-bottom-feature {
    position: absolute;
    bottom: 150px;
    left: 0px;
    width: 50px;
    height: 150px;
    background: #00b7fe;
    z-index: 3;      
 }
 .decor-second-left-bottom-feature-2 {
    position: absolute;
    bottom: 300px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;      
 } 

.station-build-container { position: relative; z-index: 2; }
.station-image-wrapper { width: 100%; overflow: hidden; position: relative; z-index: 1; }
.station-main-image { display: block; width: 100%; height: auto; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);max-height:90vh;object-fit: cover; }
.station-image-wrapper:hover .station-main-image { transform: scale(1.06); }

.station-build-info { position: absolute; top: 60px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; }
.station-build-info h2 {color:#ffffff;}
.btn-image-wrapper { position: relative; display: inline-block; margin: 0px auto 20px; transition: transform 0.3s ease; }
.btn-image-wrapper:hover { transform: translateY(-3px); }
.btn-bg-img { display: block; height: auto; width: 200px; }
.btn-image-wrapper .btn-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: var(--normal-font-size); white-space: nowrap; }

.right-deco-section {
    background: #fff;
    height: 100%;
    right: 0px;
    width: 100px;
    position: absolute;
    z-index: 3;
}

/* ==========================================================================
   IMAGE-BASED TEXT BOXES (Using desc-bg.webp)
   ========================================================================== */
/* ==========================================================================
   FRONT PAGE: STATION DESC BOX (IMAGE & HOVER)
   ========================================================================== */
.station-desc-box {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: inline-block;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    cursor: pointer; /* Changes mouse to a pointer to indicate interactivity */
}
html[lang="zh-HK"] .station-desc-box {
    max-width:250px;
    min-height:250px;
}

/* Ensure the background image scales correctly */
.station-desc-box .desc-bg-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Master container for overlay content */
.station-desc-box .desc-content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
}

/* -----------------------------------------
   ANIMATION STATES (DEFAULT)
   ----------------------------------------- */
/* Main Title (Visible by default) */
.station-main-title {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    text-align: center;
}

.station-main-title h3 {
    color: #ffffff;
    font-size: var(--stitle-font-size);
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}

/* Hover Description (Hidden by default) */
.station-hover-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Starts slightly lower (-30%) so it slides up when revealed */
    transform: translate(-50%, -30%); 
    width: 85%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.station-hover-desc p {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* -----------------------------------------
   ANIMATION STATES (ON HOVER)
   ----------------------------------------- */
/* 1. Push title UP and fade it out */
/* .station-desc-box:hover .station-main-title {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); 
} */
.home_section .station-desc-box:hover .station-main-title {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); 
}

/* 2. Slide description UP into the absolute center (-50%, -50%) and fade it in */
.station-desc-box:hover .station-hover-desc {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); 
}

.station-desc-box {
    position: relative;
    width: 100%;
    max-width: 280px;
    background-image: url('assets/images/desc-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border-radius: 0;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    min-height: 280px;    
    margin:0 auto;
}

/* Text Content Overlay */
.station-desc-box .desc-content,
.feature-text-content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
}

.station-desc-box .desc-content p {
    color: #ffffff;
    font-size: var(--desc-font-size);
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}
.station-desc-box .station-hover-desc p {
    font-size: var(--mtitle-font-size);
}
[lang="en-GB"] .station-desc-box .station-hover-desc p {
    font-size: var(--stitle-font-size);
}
.desc-bg-img { display: block; width: 100%; height: auto; border-radius: 0px 20px 0px 0px; }
.desc-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.desc-content h3 { color: #ffffff; font-size: var(--title-font-size); line-height: 1.5; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }

.station-desc-box .desc-content h3 {
    font-size: var(--desc-font-size);
}

.station-socials { position: fixed; right: 25px; bottom: 15%; display: flex; flex-direction: column; gap: 5px; z-index: 30; }
.station-socials img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.2s; background-color: #ffffff; }
.station-socials a:hover img { transform: scale(1.1); }

/* ==========================================================================
   CONSTRUCTION METHODS SECTION
   ========================================================================== */
.construction-methods { position: relative; padding: 100px 0; overflow: hidden; background-color: transparent; }
.bg-construction-corner { position: absolute; top: 0; right: 0; height: 100%; width: auto; z-index: 1; object-fit: cover; }
.bg-construction-main { position: absolute; top: 0px; left: -1px; width: 100%; height: 100%; z-index: 2; }
.bg-construction-mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.construction-content { position: relative; z-index: 3; display: flex; align-items: center; }
.construction-content .section-header { width: 35%; padding-right: 20px; }
.construction-content .section-header h3 { color: #ffffff; }
/* Construction Phase Table Styling */
.station-right-table {
    position: absolute;
    bottom: 40px; /* Adjust based on your container padding */
    right: 80px;
    width: 100%;
    max-width: 40%; /* Constrain width to match design */
    z-index: 10;
    border-radius: 18px 18px 0px 0px;
    overflow: hidden;
}
@media screen and (max-width: 1280px) {
    .station-right-table {
        bottom: 10px;
        right: 20px;
        max-width: 60%;
    }
}
@media screen and (max-width: 991px) {
    .station-right-table {
        bottom: 10px;
        right: 0px;
        max-width: 90%;
        left: 50%;
        transform: translate(-50%);
    }
}
.construction-phase-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 15px;
}

/* Header Styling (Solid Blue) */
.construction-phase-table th {
    background-color: #0077b6; /* Adjust to your exact MTR blue variable */
    color: #ffffff;
    padding: 12px 15px;
    font-weight: 600;
    border: 1px solid #0077b6;
    text-align: center;
    border-right: 1px solid #ffffff;
}
.construction-phase-table th:last-child {
    border-right: none;
}

/* Row Styling (White with light blue borders) */
.construction-phase-table td {
    padding: 15px;
    color: #0077b6; /* Blue text for the content */
    border: 1px solid #0077b6; /* Light blue divider lines */
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
}

/* Specific column widths to match the layout proportion */
.construction-phase-table th:nth-child(1),
.construction-phase-table td:nth-child(1) {
    width: 15%;
}
.construction-phase-table tr {
    background-color: rgba(255, 255, 255, 0.9);    
}
.construction-phase-table tr:nth-child(odd) {
    background-color: rgba(225, 245, 255, 0.9);    
}

.construction-phase-table th:nth-child(2),
.construction-phase-table td:nth-child(2) {
    width: 25%;
}

.construction-phase-table th:nth-child(3),
.construction-phase-table td:nth-child(3) {
    width: 60%;
}
.section-spacing {
    position: relative;
}
    .project-features-section-spacing:before {
        content: '';
        position: absolute;
        left: 0px;
        width: 20%; height: 50px;
        background-color: #0074B7;
        z-index: 5;
        top:-2px;
        /* Animation Setup */
        transform-origin: left; /* Forces it to grow outward from the top-left tip */
        transform: scale(0); /* Starts completely collapsed (invisible) */
        animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.5s; /* Brief delay so it fires smoothly after page load/scroll */    
    }  
    .project-features-section-spacing:after {
        content: '';
        position: absolute;
        right: 0px;
        width: 50px; height: 50px;
        background-color: #0074B7;
        z-index: 5;
        top:-2px;
        /* Animation Setup */
        transform-origin: right; /* Forces it to grow outward from the top-left tip */
        transform: scale(0); /* Starts completely collapsed (invisible) */
        animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.5s; /* Brief delay so it fires smoothly after page load/scroll */    
    }       
    .project-features-section-spacing-2:before {
        content: '';
        position: absolute;
        top:50px; left: 20%;
        width: 50px; height: 50px;
        background-color: #00b7fe;
        z-index: 5;
        top:-2px;
        /* Animation Setup */
        transform-origin: left; /* Forces it to grow outward from the top-left tip */
        transform: scale(0); /* Starts completely collapsed (invisible) */
        animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 1.2s; /* Brief delay so it fires smoothly after page load/scroll */    
    }     
    .method-icons-wrapper:before {
        content: '';
    position: absolute;
    left: -51px;
    bottom: 0px;
    width: 50px;
    height: 50px;
    background-color: #4bcf7d;
    z-index: 5;
    transform-origin: right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
    }    
    .method-icons-wrapper:after {
        content: '';
    position: absolute;
    right: -51px;
    top: 0px;
    width: 50px;
    height: 50px;
    background-color: #00b7fe;
    z-index: 5;
    transform-origin: right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
    }
    
.construction-methods:after {
        content: '';
        position: absolute;
        bottom:0px;
        right: 50px;
        width: 50px; height: 50px;
        background-color: #00b7fe;
        z-index: 5;
        
        /* Animation Setup */
        transform-origin: right; /* Forces it to grow outward from the top-left tip */
        transform: scale(0); /* Starts completely collapsed (invisible) */
        animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.5s; /* Brief delay so it fires smoothly after page load/scroll */       
}
    .page-template-page-construction .construction-methods:after {
        display: none;
    }

.btn { display: inline-block; padding: 10px 24px; border-radius: 25px; font-weight: bold; text-align: center; cursor: pointer; }
.btn-primary { background: #ffffff; color: var(--primary-teal); border: 1px solid #ffffff; margin-bottom: 20px; }
.btn-primary:hover { background: var(--primary-teal); color: #ffffff; }
.btn-teal-outline { border: 2px solid #00a680; color: #00a680; border-radius: 20px; padding: 5px 20px; font-size: 14px; }
.btn-teal-solid { background: #00a680; color: #ffffff; border-radius: 20px; padding: 5px 20px; font-size: 14px; border: none; }

.method-icons-wrapper { width: 75%; position: relative; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; padding: 0px 0; }
.decor-dot { position: absolute; width: 40px; height: auto; z-index: 4; }
.dot-green { bottom: 0; left: -40px; }
.dot-blue-top { top: 0; right: -41px; }
.dot-blue-bottom { bottom: 0; right: -10px; }

/* --- Icon List Area (Alignment Fix) --- */
.method-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    align-items: flex-start; /* This forces the bottoms of the boxes to align, pushing icons up naturally */
    width: 100%;
}

.icon-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px; /* Slightly more padding for breathing room */
    position: relative;
    height: 100%;
}

/* Vertical Separator Lines */
.icon-box:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%; /* Center the line vertically */
    transform: translateY(-50%);
    height: 100%; /* Exact height to match your mockup lines */
    width: 1px;
    background-color: #ffffff;
}
/* .icon-box-imgarea {
    max-width: 80px;
    height: 100px;    
} */
/* Icon Alignment */
.icon-box img {
    /* height: 80px; */
    width: 100px;
    object-fit: contain;
    margin-bottom: 25px; /* Creates consistent spacing between the icon and the text below it */
}
 .icon-box-imgarea {
    min-height: 120px;    
}
.icon-box:nth-child(2) .icon-box-imgarea {
    max-width: 200px;
}
.icon-box:nth-child(2) .icon-box-imgarea img {
    width: 110px;
}
.icon-box:nth-child(3) .icon-box-imgarea {
    max-width: 200px;
}
.icon-box:nth-child(3) .icon-box-imgarea img {
    width: 80px;
}
/* Text Wrapping and Alignment Fix */
.icon-box p {
    color: #ffffff;
    font-size: var(--basic-font-size);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    /* Force text to wrap optimally like Image 2 */
    width: 100%;
    max-width: 200px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* ==========================================================================
   EXPANDED ANIMATIONS (Safe for centered/absolute elements)
   ========================================================================== */
/* Zoom Reveal */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-zoom.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Premium Clip Reveal (Perfect for Hero Title - does NOT use transform!) */
.reveal-clip {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-clip.is-visible {
    opacity: 1;
    clip-path: inset(-20px -20px -20px -20px);
}

/* Add the .reveal-clip class to your Hero Title to fix the crash! */


/* ==========================================================================
   FOCUS NEWS SECTION (Horizontal Layout)
   ========================================================================== */
.focus-news {
    position: relative;
    padding: 150px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Decorative Background Blocks */
.decor-news {
    position: absolute;
    z-index: 0;
    pointer-events: none; /* Ensures the images never block the user from clicking the news cards */
}

.decor-news .decor-img {
    display: block;
    width: 100%;
    height: auto;
}
.decor-news.decor-news-bl .decor-img,
.decor-news.decor-news-rm .decor-img {
    max-width:99px;
}

/* Position and scale each specific image */
.decor-news-tl {
    top: 0; 
    left: 0; 
}

.decor-news-bl {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 100px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-news-bl-01 {
    position: absolute;
    bottom: 100px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-news-bl-02 {
    position: absolute;
    bottom: 150px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}

.decor-news-rm {
    position: absolute;
    top: 20%;
    right: 0px;
    width: 100px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-news-rm-01 {
    position: absolute;
    top: calc(20% + 50px);
    right: 0px;
    width: 50px;
    height: 250px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}
.decor-news-rm-02 {
    position: absolute;
    top: calc(20% + 250px);
    right: 0px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;  
}

.decor-news-rt {
    top: 0%; /* Centers it vertically on the right side */
    right: 0; 
}

/* Container Layout */
.focus-news-container {
    display: flex;
    align-items: flex-start;
    gap: 0px;
    position: relative;
    z-index: 2;
}

/* Sidebar (Title & Filters) */
.focus-news-sidebar {
    width: 18%;
    flex-shrink: 0;
}
.focus-news-sidebar .section-title-wrap {
    margin-bottom: 40px;
}
.news-filters,
.news-filters-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-btn {
    border-radius: 30px;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    background: transparent;
    color: #a0a0a0;
    font-size: var(--normal-font-size);
    cursor: pointer;
    text-align: center;
    width: 50%;
    transition: all 0.3s ease;
}
.filter-btn.active, .filter-btn:hover {
    background: var(--primary-teal);
    color: #ffffff;
    border-color: var(--primary-teal);
}

/* Content (Carousel & Arrows) */
.focus-news-content {
    display: flex;
    align-items: center;
    width: 82%;
    gap: 20px;
}

.carousel-arrow {
    width: 32px;
    height: 32px;
    background: var(--primary-teal);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.carousel-arrow svg {
    height: 30px;
    width: 30px;
    stroke-width: 1;
}
.carousel-arrow:hover {
    transform: scale(1.1);
}

.news-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex-grow: 1;
}

/* News Cards Styling */
.news-card {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease;
}
/* .news-card:hover {
    transform: translateY(-5px);
} */
.news-card .card-image {
    /* border: 4px solid var(--primary-teal); */
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}
.news-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.news-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.card-meta {
    font-size: var(--normal-font-size);
    color: var(--text-dark);
    font-weight: normal;
    margin-bottom: 5px;
}
.card-title {
    font-size: var(--normal-font-size);
    font-weight: normal;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 15px;
}
.card-tag {
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    border-radius: 20px;
    padding: 4px 28px;
    font-size: var(--normal-font-size);
    display: inline-block;
    cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 10;
}
/* ==========================================================================
   CLICKABLE NEWS TAGS
   ========================================================================== */
.card-tag:hover { background: var(--primary-teal); color: #ffffff; }

.news-tag { cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 10; }
.tag-green:hover { background: #1a9e52; color: #ffffff; }
.tag-white:hover { background: #ffffff; color: #0076c8; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .focus-news-container {
        flex-direction: column;
    }
    .focus-news-sidebar, .focus-news-content {
        width: 100%;
    }
    .news-filters {
        flex-direction: row;
        width: 100%;
    }
    .news-carousel {
        grid-template-columns: 1fr;
    }
    .carousel-arrow {
        display: none; /* Hide custom arrows on mobile, allow native swipe */
    }
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer-minimal { padding: 40px 0 20px; font-size: var(--normal-font-size); color: #666; }
.disclaimer-text { margin-bottom: 20px; }
.disclaimer-text p { font-size: var(--xs-font-size); }
.footer-bottom-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; padding-top: 15px; }
.footer-links a { color: #333; margin: 0 5px; }
.footer-links a:hover { color: #00a680; }

/* Remove default list styling */
.footer-links .dynamic-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px; /* Adjust spacing as needed */
}

/* Align list items inline */
.footer-links .dynamic-footer-menu li {
    display: inline-flex;
    align-items: center;
}

/* Add the pipe divider after every item EXCEPT the last one */
.footer-links .dynamic-footer-menu li:not(:last-child)::after {
    content: "|";
    margin-left: 12px; /* Space between the text and the pipe */
    /* Inherit the color of your surrounding footer text here */
}

/* Ensure the links inherit their correct colors */
.footer-links .dynamic-footer-menu li a {
    text-decoration: none;
    /* Add your hover transitions and colors here */
}
.footer-links, .copyright {
    font-size: var(--basic-font-size);
}

/* ==========================================================================
   RESPONSIVE LAYOUT (Non-Menu elements)
   ========================================================================== */
@media (max-width: 992px) {
    .station-build .station-build-container, .construction-methods .construction-content, .footer-inner { flex-direction: column; align-items: flex-start; }
    .text-box-gradient { width: 100%; margin: 0 0 20px 0; }
    .station-image { width: 100%; margin: 0; }
    .construction-content .section-header, .method-icons-wrapper { width: 100%; border: none; padding: 0; }
    .method-icons { flex-direction: column; gap: 20px; }
    .icon-box:not(:first-child)::before { display: none; }
    .news-carousel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS (Station Build Section)
   ========================================================================== */

/* 1. Initial Hidden States */
/* .station-build-info {
    opacity: 0;
    transform: translateX(-60px); 
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */

/* .station-image-wrapper {
    opacity: 0;
    transform: translateX(60px); 
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s, 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
} */

/* 2. Active Visible States (Triggered by JS) */
/* .station-build-info.is-visible,
.station-image-wrapper.is-visible {
    opacity: 1;
    transform: translateX(0);
} */
/* ==========================================================================
   EXPANDED GLOBAL SCROLL REVEAL SYSTEM
   ========================================================================== */

/* Base transitions for all directional reveals */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Initial States --- */
.reveal-up {
    transform: translateY(50px);
}
.reveal-down {
    transform: translateY(-50px);
}
.reveal-left {
    transform: translateX(50px);
}
.reveal-right {
    transform: translateX(-50px);
}

/* --- Active States (Triggered by JS) --- */
.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================================
   LETTER-BY-LETTER REVEAL EFFECT (Updated)
   ========================================================================== */
/* We remove display: inline-block from the parent so it respects block layouts (like H2) */
.reveal-letters {
    /* No display property needed here anymore */
}

/* Styling for each individual letter span injected by JavaScript */
.reveal-letters .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(1em); /* Start lowered inside invisible mask */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When the parent container scrolls into view, animate the characters */
.reveal-letters.is-visible .char {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================================
   SINGLE POST TEMPLATE (News Details Page)
   ========================================================================== */

/* Constrain the reading width for better typography */
.single-post-container {
    max-width: 800px;
    margin: 0 auto;
}
.single-post-container .entry-content img {
    margin:0 auto;
    margin-bottom:20px;
}

/* Header Styling */
.entry-header {
    text-align: center;
    margin-bottom: 40px;
}

.post-category-badge {
    display: inline-block;
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 14px;
    margin-bottom: 20px;
}

.entry-content {
max-width: 1024px;
    margin: 0 auto;    
}

.entry-title {
    font-size: var(--title-font-size);
    color: var(--primary-blue);
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: bold;
}

.entry-meta {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 30px;
}

/* Featured Image Styling (Matching the front page cards) */
.post-thumbnail {
    border-radius: 12px;
    overflow: hidden;
    border: 4px solid var(--primary-teal);
    margin-bottom: 50px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Content Formatting */
.entry-content {
    font-size: var(--normal-font-size);
    line-height: 1.8;
    color: var(--text-dark);
}

.entry-content p {
    margin-bottom: 25px;
}

.entry-content h2, 
.entry-content h3 {
    color: var(--primary-blue);
    margin: 40px 0 20px;
    font-weight: bold;
}

.entry-content ul, 
.entry-content ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.entry-content li {
    margin-bottom: 10px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    display: block;
}

/* Bottom Return Button */
.entry-footer {
    margin-top: 60px;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .entry-title {
        font-size: var(--mtitle-font-size);
    }
    .entry-content {
        font-size: var(--basic-font-size);
    }
    .station-desc-box {
        max-width: 70% !important;
    }      
}

/* ==========================================================================
   RESPONSIVE PICTURE TAG UTILITIES
   ========================================================================== */
picture.responsive-picture {
    display: block;
    width: 100%;
    height: 100%;
}

picture.responsive-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the space without stretching */
}

/* Ensure the station image specifically doesn't force a massive height on desktop */
.station-image-wrapper picture.responsive-picture img {
    object-fit: contain; /* Or 'cover', depending on your exact image aspect ratio */
    border-radius: 16px; /* Keeps your desktop curves */
}

/* ==========================================================================
   CONSTRUCTION PAGE - HERO OVERLAP SECTION
   ========================================================================== */

/* Hero Fixes */
.hero-bg-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-color: #f4f4f4; /* Fallback color if image breaks */
}

/* Update this specific block in your style.css */
.hero-content-container {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    height: 100%;
    /* Let the global .container handle width and padding! */
    width: 100%; 
}

.hero-floating-box {
    margin-top: 40px;
    max-width: 450px; /* Controls how wide the gradient box gets */
}

/* Title Styling */
.hero-floating-box .section-title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.hero-floating-box h1 {
    font-size: 38px;
    color: var(--primary-blue, #005eb8);
    margin: 0;
}

/* The Blue/Green Gradient Box */
.hero-gradient-box {
    background: linear-gradient(135deg, #0076c8 0%, #00a680 100%);
    border-radius: 0 50px 0 0; /* Distinctive top-right curve */
    padding: 45px 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* Soft shadow to lift it off the image */
}

.hero-gradient-box h2 {
    color: #ffffff;
    font-size: var(--mtitle-font-size);
    line-height: 1.4;
    margin: 0;
    text-shadow: none;
}

/* Decorative Elements (Based on Image 2) */
.decor-hero-right-curve {
    position: absolute;
    right: -20px;
    top: 15%;
    width: 100px;
    height: 200px;
    background-color: var(--primary-teal, #00a680);
    border-radius: 200px 0 0 200px; /* Half-circle shape */
    z-index: 5;
}

.decor-hero-bottom-squares {
    position: absolute;
    bottom: -15px;
    right: 15%;
    display: flex;
    z-index: 5;
}

.decor-hero-bottom-squares .square {
    width: 30px;
    height: 30px;
}

.decor-hero-bottom-squares .dark-green { background-color: #007c5e; }
.decor-hero-bottom-squares .light-green { background-color: #00a680; margin-top: -15px; }

/* ==========================================================================
   PROJECT FEATURES (項目特點)
   ========================================================================== */
.project-features-section {
    padding: 60px 0 100px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Pill Title (Gradient Background) */
.pill-title-wrapper {
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Updated Pill Title (Using Image) */
.pill-title {
    display: inline-block;
    background: #0074b7;
    color: #ffffff;
    font-size: 22px;
    border-radius: 0; /* Removes old CSS radius */
    margin: 0;
    font-weight: normal;
    max-width: fit-content;
    padding:0px 20px;
    width: 100%;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
}
.pill-title-left {
    width:100%;
    max-width:55px;
    height:55px;
    background: url('/wp-content/themes/MTR_HSK/assets/images/title-left.svg');
}
.pill-title-right {
    width:100%;
    max-width:55px;
    height:55px;
    background: url('/wp-content/themes/MTR_HSK/assets/images/title-right.svg');
}

.innovation-section .pill-title-wrapper,
.project-features-section .pill-title-wrapper {
    justify-content: left;
}
.innovation-section .pill-title,
.project-features-section .pill-title {
    display: inline-block;
    background-image: url('assets/images/pill-title.webp'); /* Uses your uploaded image */
    background-size: 100% 100%; /* Stretches safely to fit text length */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    color: #ffffff;
    font-size: 29px;
    border-radius: 0; /* Removes old CSS radius */
    margin: 0;
    font-weight: normal;
    /* max-width: 300px; */
    width: 100%;
    height: 55px;
    padding:30px 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[lang="en-GB"] .innovation-section .pill-title,
html[lang="en-GB"] .project-features-section .pill-title {
    /* max-width: 450px; */
    width: 100%;
    height: auto;
    max-height: 60px;
}

/* Alternating Grid Rows */
.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 80px;
}

/* The .reverse class flips the flex direction! */
.feature-row.reverse {
    flex-direction: row-reverse; 
}

.bg-construction-mobile {
    display: none;
}

/* Columns Setup */
.feature-img-col {
    flex: 0 0 65%; /* Image is wider */
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.feature-text-col {
    flex: 0 0 30%; /* Text is narrower */
    display: flex;
    height: -webkit-fill-available;
    position: relative;
    align-items: center;
}

/* Aligns text box to the right side of its column for reverse rows */
.feature-text-col.align-right {
    justify-content: flex-end;
}

.feature-img-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   ROW 3: SINGLE IMAGE & MULTI-CAPTION SLIDER
   ========================================================================== */
.row-3-updated {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.row-3-updated .feature-left-col {
    flex: 0 0 65%;
    position: relative;
}

.row-3-updated .feature-main-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    display: block;
}

.caption-slider-bar {
    background-color: #0076c8;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-radius: 0 0 20px 20px;
}

.cap-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    background: transparent;
}

.cap-arrow.border-white {
    border: 1px solid #ffffff;
    color: #ffffff;
}

.cap-arrow.bg-white {
    background-color: #ffffff;
    color: #0076c8;
    border: none;
}

.cap-arrow:hover {
    opacity: 0.8;
}

.caption-text-container {
    flex-grow: 1;
    text-align: center;
    position: relative;
    height: 24px;
    overflow: hidden;
    padding: 0 20px;
}

.caption-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin: 0;
    font-size: 16px;
}

.caption-slide.active {
    opacity: 1;
    position: relative;
}

.row-3-updated .feature-right-col {
    flex: 1;
    display: flex;
    align-items: center;
}

.gradient-text-box {
    background: linear-gradient(135deg, #0076c8 0%, #34c759 100%);
    color: #ffffff;
    padding: 40px;
    border-radius: 0 40px 0 40px;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
}

#dynamic-right-text {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 300;
    transition: opacity 0.3s ease;
    margin: 0;
}

@media (max-width: 992px) {
    .row-3-updated {
        flex-direction: column;
    }
    .row-3-updated .feature-left-col, 
    .row-3-updated .feature-right-col {
        flex: 1 1 100%;
        width: 100%;
    }
    .gradient-text-box {
        min-height: auto;
        padding: 30px 20px;
        border-radius: 20px;
    }
}

/* ==========================================================================
   IMAGE-BASED TEXT BOXES (項目特點)
   ========================================================================== */
.feature-text-box {
    position: relative;
    width: 100%;
    max-width: 330px; /* Adjust to match the width of the background image */
    display: flex;
    /* box-shadow: 0 15px 30px rgba(0,0,0,0.1); */
    height: fit-content;
    /* Remove padding and linear-gradient from here */
}

/* Background Image styling */
.feature-desc-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* Flip the image horizontally when the box is on the right side of the row */
.feature-text-box.box-right .feature-desc-bg {
    transform: scaleX(-1);
}

/* Text Content Overlay */
.feature-desc-content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Adjust padding to center text within the shape */
}
.feature-text-box .feature-desc-content {
    display: block;
    overflow: auto;
    padding:40px 30px;
}

.feature-text-box .feature-desc-content li {
    padding-bottom: 15px;
}

.feature-desc-content h3 {
    color: #ffffff;
    font-size: var(--stitle-font-size);
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}

/* ==========================================================================
   FEATURE GALLERY STYLES
   ========================================================================== */
.feature-img-col.has-gallery {
    display: flex;
    flex-direction: column;
}

.gallery-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0; /* Rounds top corners, bottom connects to blue bar */
}

.gallery-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-slide {
    flex: 0 0 100%; /* Forces each slide to take up 100% of the container */
    width: 100%;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Let the viewport handle the rounding */
    box-shadow: none;
}

/* Updated Navigation Arrows (Matching Screenshot) */
.img-caption-bar .nav-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    
}

.img-caption-bar .nav-arrow svg {
    width: 20px;
    height: 20px;
}

.img-caption-bar .nav-arrow:hover {
    background-color: #ffffff;
    color: #0072bc;
}

/* ==========================================================================
   INNOVATION & TECHNOLOGY SECTION (2x2 Grid + Decorative Shapes)
   ========================================================================== */
.innovation-section {
    padding: 80px 0 120px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.innovation-description {
    font-size: var(--normal-font-size);
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 60px;
}

/* Wrapper sets the stage for absolute positioning */
.tech-grid-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 40px; /* Gives room for shapes to bleed outside the grid */
    z-index: 1;
}

/* --- The 2x2 Grid --- */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* Generous gap for the center decorations */
    position: relative;
    z-index: 10; /* Keeps cards above decorations */
}

/* ==========================================================================
   EXACT DECORATIVE SHAPES (Glued securely to cards)
   ========================================================================== */

/* Ensure cards are anchors for the shapes */
.tech-card {
    position: relative; 
    z-index: 2; /* Keeps card content above the decorations */
}
/* 1. The Initial State (Hidden & pushed down slightly) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. The Final State (Fades in and slides to original position) */
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================================================
   FLOATING LABELS ANIMATION (Station Design)
   ========================================================================== */

/* Define the smooth entrance animation */
@keyframes labelFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FLOATING LABELS SCROLL ANIMATION (Station Design)
   ========================================================================== */



/* --- OPTIONAL: Staggering the grid items --- */
/* If you apply .scroll-reveal to multiple cards in a grid, this makes them pop up one by one */
.tech-card:nth-child(1).is-visible { transition-delay: 0.1s; }
.tech-card:nth-child(2).is-visible { transition-delay: 0.2s; }
.tech-card:nth-child(3).is-visible { transition-delay: 0.3s; }
.tech-card:nth-child(4).is-visible { transition-delay: 0.4s; }

/* 2. CARD 1 (Top Left) - Blue Vertical Bar with Grow Animation */
.tech-card:nth-child(1)::before {
    content: '';
    position: absolute;
    top: -40px; left: -40px;
    width: 100px; height: 350px;
    background-color: #0076c8;
    z-index: -1;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}

.tech-card:nth-child(1)::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 300px; height: 350px;
    background-color: #4bcf7d;
    z-index: -1;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}


/* 3. CARD 2 (Top Right) - Green Square & Cyan Rectangle */
/* .tech-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 40%; right: -20px;
    width: 40px; height: 40px;
    background-color: #53d07e;
    z-index: -1;
} */
.tech-card:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 280px; height: 100px;
    background-color: #00b7fe;
    z-index: -1;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}

/* 4. CARD 3 (Bottom Left) - Cyan Square & Green L-Shape */
.tech-card:nth-child(3)::before {
    content: '';
    position: absolute;
    bottom: -40px; left: -48px;
    width: 280px; height: 100px;
    background-color: #53d07e;
    z-index: -1;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}

.tech-card:nth-child(3)::after {
    content: '';
    position: absolute;
    bottom: 60px; left: -95px;
    width: 48px; height: 48px;
    background: #00b7fe;
    z-index: -1;
}

/* 5. CARD 4 (Bottom Right) - Green Vertical Bar */
.tech-card:nth-child(4)::before {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 200px; height: 200px;
    background-color: #0076c8;
    z-index: -1;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}

.tech-card:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 100px; height: 350px;
    background-color: #4bcf7d;
    z-index: -1;
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
}
.tech-card.scroll-reveal.is-visible::before {
    animation: growFromCorner 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* Wait for the card to slide up first, then grow the corner */
}
.tech-card.scroll-reveal.is-visible::after {
    animation: growFromCorner 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* Wait for the card to slide up first, then grow the corner */
}
/* The Keyframe Animation */
@keyframes growFromCorner {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
/* The Keyframe Animation */
@keyframes growFromTop {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
/* The Keyframe Animation */
@keyframes growFromleft {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
/* Hide on mobile to prevent layout breaking */
@media (max-width: 992px) {
    .tech-grid::before, .tech-grid::after,
    .tech-card::before, .tech-card::after { display: none; }
}

/* 1. Fix the Header Gradient */
.tech-card-header {
    /* Updated to a lighter cyan/blue to match Image 2 */
    background: linear-gradient(90deg, #50c4d9 0%, #0074b7 50%, #53d07e 100%);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tech-card-header h4 {
    color: #ffffff;
    margin: 0;
    font-size: 1.625rem;
    font-weight: normal;
    text-align: center;
    flex-grow: 1;
    max-width: 90%;
}

/* 2. Fix the Icon Circle (Base state) */
.tech-icon-circle {
    position: absolute;
    right: 20px;
    width: 38px;
    height: 38px;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: #19a658; /* Ensure it stays transparent */
    transition: transform 0.4s ease;
}

.tech-chevron {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   REFINED HOVER ACCORDION OVERLAY & TEXT ANIMATION
   ========================================================================== */

/* 3. Fix the Image & Overlay Wrapper */
.tech-card-body {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: transparent; /* Removed the black background that washed it out */
}

.tech-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tech-card:last-child h4 {
    font-size:1rem;
}
.tech-card:last-child .tech-card-header {
    padding:20px;
}

/* 4. Fix the Hover Overlay Color (Darker, crisper mask) */
.tech-hover-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Changed from bright blue to a dark translucent navy/black for crisp contrast */
    background-color: rgba(46, 114, 178, 0.8); 
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Text styling inside overlay */
.tech-hover-overlay p {
    color: #ffffff;
    margin: 0;
    font-size: var(--basic-font-size);
    line-height: 1.8;
    text-align: justify;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   HOVER ACTIONS
   ========================================================================== */

.tech-card:hover .tech-hover-overlay {
    opacity: 1;
}

.tech-card:hover .tech-hover-overlay p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s; 
}

.tech-card:hover .tech-card-img {
    transform: scale(1.04);
}

/* 5. Fix the Icon Hover State */
.tech-card:hover .tech-icon-circle {
    transform: rotate(180deg);
    /* Removed the background-color and color change. It stays a white outline! */
}

/* ==========================================================================
   EXACT DECORATIVE SHAPES (From Screenshot)
   ========================================================================== */
.innovation-decor {
    position: absolute;
    z-index: 1; /* Sits behind the grid */
}

/* 1. Top Left Blue Rectangle */
.decor-top-left-blue {
    top: -20px; left: 0;
    width: 40px; height: 180px;
    background-color: #0076c8;
}

/* 2. Center Cross (Green Horizontal) */
.decor-center-h-green {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 50px;
    background-color: #53d07e;
}

/* 3. Center Cross (Blue Vertical, below green) */
.decor-center-v-blue {
    top: 50%; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 100px;
    background-color: #0076c8;
}

/* 4. Right Side Green Square */
.decor-right-green {
    top: 45%; right: 10px;
    width: 40px; height: 40px;
    background-color: #53d07e;
}

/* 5. Right Side Blue Rectangle */
.decor-right-blue {
    top: 52%; right: -10px;
    width: 60px; height: 40px;
    background-color: #00b0ff; /* Bright Cyan */
}

/* 6. Bottom Left Cyan Square */
.decor-bl-blue {
    bottom: -20px; left: 0;
    width: 40px; height: 40px;
    background-color: #00b0ff;
}

/* 7. Bottom Left Green Corner (L-Shape via border trick) */
.decor-bl-green {
    bottom: -50px; left: 20px;
    width: 60px; height: 60px;
    border-left: 30px solid #53d07e;
    border-bottom: 30px solid #53d07e;
}

/* 8. Bottom Center Blue Rectangle (Under gap) */
.decor-bm-blue {
    bottom: -40px; left: 50%;
    margin-left: -50px;
    width: 50px; height: 50px;
    border-bottom: 30px solid #0076c8;
    border-left: 30px solid #0076c8;
}

/* 9. Bottom Right Green Vertical Bar */
.decor-br-green {
    bottom: -60px; right: 20px;
    width: 30px; height: 120px;
    background-color: #53d07e;
}

/* Mobile Fallback: Hide complex decorations on small screens to prevent overflow */
@media (max-width: 992px) {
    .tech-grid { grid-template-columns: 1fr; gap: 20px; }
    .innovation-decor { display: none; }
    .tech-grid-wrapper { padding: 0; }
    .tech-icon-circle { display: none; }
    
    /* Restore overlay behavior for mobile (tap/touch to view) */
    .tech-card-body { 
        aspect-ratio: 16 / 9; /* Maintains the image shape */
    }
    .tech-hover-overlay { 
        opacity: 0; /* Hidden by default until tapped */
        position: absolute; /* Forces it OVER the image */
        height: 100%; 
        padding: 20px; /* Reduced padding so text fits on small screens */
    }
    .tech-hover-overlay p {
        font-size: 14px !important; /* Scales text down slightly for mobile */
        line-height: 1.5;
    }
}


/* ==========================================================================
   PROJECT PROGRESS SECTION (Synchronized Slider)
   ========================================================================== */
.project-progress-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #ffffff;
    position: relative;
}

.progress-layout {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Left Text Box */
.progress-text-box {
    width: 45%; /* Slightly wider text area matching screenshot */
    background-color: #1a9e52; /* Lighter MTR green from screenshot */
    color: #ffffff;
    position: relative;
    padding: 120px 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.progress-layout:before {
    content: '';
    position: absolute;
    top: 0px; left: 0px;
    width: 50px; height: 50px;
    background-color: #4bcf7d;
    z-index: 2;
    
    /* Animation Setup */
    transform-origin: top left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
    animation: growFromCorner 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* Brief delay so it fires smoothly after page load/scroll */    
}
.progress-text-box:before {
    content: '';
    position: absolute;
    bottom: 0px; left: 0px;
    width: 70%; height: 50px;
    background-color: #4bcf7d;
    z-index: 2;
    
    /* Animation Setup */
    transform-origin:  left; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
    animation: growFromleft 1s cubic-bezier(0, 0.5, 0, 1) forwards;
    animation-delay: 0.5s; /* Brief delay so it fires smoothly after page load/scroll */        
}
.progress-text-box:after {
    content: '';
    position: absolute;
    bottom: 0px; right: 0px;
    width: 30%; height: 50px;
    background-color: #00b7fe;
    z-index: 2;
    
    /* Animation Setup */
    transform-origin:  right; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
    animation: growFromleft 1s cubic-bezier(0, 0.5, 0, 1) forwards;
    animation-delay: 0.3s; /* Brief delay so it fires smoothly after page load/scroll */        
}
.progress-image-box:before {
    content: '';
    position: absolute;
    bottom: 0px; left: 0px;
    width: 50px; height: 100px;
    background-color: #00b7fe;
    z-index: 2;
    
    /* Animation Setup */
    transform-origin: bottom; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
    animation: growFromTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s; /* Brief delay so it fires smoothly after page load/scroll */       
}
.progress-image-box:after {
    content: '';
    position: absolute;
    bottom: 100px; left: 0px;
    width: 50px; height: 50px;
    background-color: #0076c8;
    z-index: 2;
    
    /* Animation Setup */
    transform-origin: bottom; /* Forces it to grow outward from the top-left tip */
    transform: scale(0); /* Starts completely collapsed (invisible) */
    animation: growFromTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: .73s; /* Brief delay so it fires smoothly after page load/scroll */       
}


.ds-light-green { background-color: #6edb96; }

.progress-text-inner {
    position: relative;
    z-index: 2;
}

/* Text Slider Mechanics */
.progress-text-viewport {
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
}

.progress-text-track,
.progress-media-track {
    display: flex;
    flex-wrap: nowrap !important; /* Force items to stay in a single row */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-text-slide,
.progress-media-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important; /* Prevents overflow stretching */
}

.progress-subtitle {
    font-size: 35px;
    margin: 0 0 15px 0;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
}

.progress-divider {
    border: none;
    border-top: 2px solid #ffffff;
    width: 100%;
    margin: 25px 0;
}

.progress-desc {
    font-size: var(--normal-font-size);
    line-height: 1.8;
    margin: 0;
    color: #ffffff;
}

/* Progress Navigation Arrows */
.progress-nav-arrows {
    display: flex;
    padding: 0 50px;
    margin-top: 40px;
    position: relative;
    z-index: 50 !important; /* Forces it above all decorative squares */
    pointer-events: auto !important;
    justify-content: space-between;
}

.progress-nav-arrows .nav-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-nav-arrows .nav-arrow svg {
    width: 20px;
    height: 20px;
}

.progress-nav-arrows .nav-arrow:hover {
    background-color: #ffffff;
    color: #1a9e52;
}

/* Right Media Box */
.progress-image-box {
    width: 55%;
    position: relative;
}

.progress-media-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.progress-media-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-media-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-media-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Re-using the central play button specifically for progress */
.progress-media-slide .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    z-index: 10;
}

.environment-section {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

.environment-description {
    font-size: var(--normal-font-size);
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 40px;
}
.environment-description a {
    color:#1a9e52;
    text-decoration: underline;
    font-weight: bold;
}
.decor-second-right-top-environment { 
    position: absolute;
    top: 0px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;       
 }
.decor-second-right-top-environment-1 { 
    position: absolute;
    top: 50px;
    right: 0px;
    width: 50px;
    height: 150px;
    background: #4bcf7d;
    z-index: 3;       
 } 
.decor-second-right-top-environment-2 { 
    position: absolute;
    top: 150px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;       
 } 

/* Mobile Adjustments */
@media (max-width: 992px) {
    .progress-layout {
        flex-direction: column; /* Put image on top for mobile */
    }
    .progress-text-box, .progress-image-box {
        width: 100%;
    }
    .progress-image-box {
        height: 350px;
    }
    .progress-text-box {
        padding: 80px 20px;
    }
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .tech-grid {
        grid-template-columns: 1fr;
    }
}

/* Specific Rounded Corners */
.radius-tl { border-radius: 40px 0 0 0; } /* Top Left Curve */
.radius-tr { border-radius: 0 40px 0 0; } /* Top Right Curve */

.feature-text-box h3 {
    color: #ffffff;
    font-size: var(--normal-font-size);
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}

/* Blue Image Caption Bar (Row 3) */
.img-caption-bar {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background-color: #0072bc; /* Solid blue */
    color: #ffffff;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
}

.img-caption-bar p {
    margin: 0;
    font-size: var(--normal-font-size);
}

.img-caption-bar .nav-arrow {
    font-size: var(--stitle-font-size);
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   NEWS LISTING PAGE (Dedicated Styles)
   ========================================================================== */
.page-news-listing .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.page-news-listing .news-section { padding: 80px 0;}
.page-news-listing .bg-white { background-color: #ffffff; }
.page-news-listing .bg-mtr-blue { background-color: #0076c8; }
.page-news-listing .text-mtr-blue { color: #0076c8; }
.page-news-listing .text-white { color: #ffffff; }
.page-news-listing .relative { position: relative; overflow: hidden; }
.news-section h2 {
    font-size: var(--title-font-size);
}
/* Layout Structure */
.news-layout { display: flex; gap: 40px; align-items: flex-start; margin-top: 40px; }
.news-sidebar { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; }
.news-main { flex-grow: 1; width: calc(100% - 240px); }

/* Unique Filter Buttons (Prevents Landing Page Crash) */
.news-page-filter-btn { 
    width: 100%; padding: 10px 20px; border-radius: 30px; border: 1px solid #1a9e52;
    background: transparent; color: #1a9e52; font-size: var(--basic-font-size); cursor: pointer; transition: 0.3s;
    margin-bottom:10px;
    max-width:190px;
}
.news-page-filter-btn.active, .news-page-filter-btn:hover { background: #1a9e52; color: #ffffff; }
.filter-light { border-color: #ffffff; color: #ffffff; }
.filter-light.active, .filter-light:hover { background: #ffffff; color: #0076c8; }

/* Grid and Cards */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.news-card-item { 
    display: flex; flex-direction: column; gap: 15px; cursor: pointer; 
    text-decoration: none !important; color: inherit; transition: transform 0.3s ease;
}

.news-img-wrap { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; position: relative; }
.card-dark .news-img-wrap { border-color: #ffffff; }
.news-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-card-item:hover .news-img-wrap img { transform: scale(1.05); }

/* Text Content */
.news-card-item .news-date { font-size: var(--normal-font-size); color: #666; }
.news-card-item.card-dark .news-date { color: #ffffff; }
.news-card-item .news-title { font-size: var(--normal-font-size); line-height: 1.5; margin: 0 0 10px 0; font-weight: normal; flex-grow: 1;color:#505050; }
.press-release .news-card-item .news-title { color: #ffffff; }
.news-card-item.card-dark .news-title { color: #ffffff; }
.news-card-item .news-tag { display: inline-block; padding: 4px 28px; border-radius: 20px; font-size: var(--basic-font-size); align-self: flex-start;text-align: center; }
.tag-green { border: 1px solid #1a9e52; color: #1a9e52; }
.tag-white { border: 1px solid #ffffff; color: #ffffff; }

/* Buttons */
.news-load-more { text-align: center; }
.btn-solid-green { background: #1a9e52; color: white; padding: 10px 30px; border-radius: 30px; border: none; cursor: pointer; }
.btn-solid-white { background: white; color: #0076c8; padding: 10px 30px; border-radius: 30px; border: none; cursor: pointer; }

/* Common Tables */
.common-table-wrap, .council-table-wrap { margin: 40px auto 0; border: 1px solid #0d8343;border-radius: 30px 30px 0px 0px; }
.common-header, .council-header { background: #0d8343; color: white; display: flex; font-weight: bold; font-size: var(--normal-font-size);border-radius: 30px 30px 0px 0px; }
.common-row, .council-row { display: flex;  color: #1a9e52; text-decoration: none; transition: 0.3s;border-bottom: 1px solid #0d8343;  }
.common-row:nth-child(odd), .council-row:nth-child(odd) { background-color: #f1f9ed; }
.common-row:nth-child(even), .council-row:nth-child(even) { background-color: #def1d5; }
.common-row:hover, .council-row:hover { background-color: #dcf1e3; }
.common-col-date { width: 30%;text-align: center;border-right:1px solid #0d8343;color: #00793c; }
.common-col-title { width: 70%; padding-left: 20px;text-align: center; }
.common-row:last-child,.council-row:last-child { border-bottom: none; }
.common-list .common-col-date,
.common-list .common-col-title,
.council-row .col-date,
.council-row .col-org,
.council-row .col-project,
.council-row .col-file,
.common-header .common-col-date,
.common-header .common-col-title {
    padding: 15px 20px;
}

/* Council Documents Table */

.council-row .col-date { width: 20%; text-align: center;border-right:1px solid #0d8343; }
.council-row .col-org { width: 30%; text-align: center;border-right:1px solid #0d8343; }
.council-row .col-project { width: 30%; text-align: center;border-right:1px solid #0d8343; }
.council-row .col-file { width: 20%; text-align: center; }

.council-header .col-date { width: 20%; text-align: center;border-right:1px solid #ffffff;padding: 15px 20px; }
.council-header .col-org { width: 30%; text-align: center;border-right:1px solid #ffffff;padding: 15px 20px; }
.council-header .col-project { width: 30%; text-align: center;border-right:1px solid #ffffff;padding: 15px 20px; }
.council-header .col-file { width: 20%;  text-align: center;padding: 15px 20px;}

.common-header .common-col-date {
    text-align: center;border-right:1px solid #ffffff; color:#fff;
}


/* Table Style */


/* ==========================================================================
   COMMUNITY PAGE STYLES
   ========================================================================== */
.page-community .container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 40px; }
.page-community .community-section { padding: 80px 0;min-height:65vh; }
.page-community .bg-white { background-color: #ffffff; }
/* .page-community .bg-mtr-blue { background-color: #0076c8; } */
.page-community .relative { position: relative; overflow: hidden; }

/* Landing Decorations */
.decor-tr-green-landing {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;      
    transform-origin: top right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;           
}


.decor-tl-green-com {
    position: absolute;
    bottom: 100px;
    left: 0px;
    width: 50px;
    height: 250px;
    background: #0074b7;
    z-index: 3;    
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;             
}
.decor-bl-squares-com {
    position: absolute;
    bottom: 150px;
    left: 50px;
    width: 50px;
    height: 250px;
    background: #4bcf7d;
    z-index: 3;        
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: .9s;    
}
.decor-bl-squares-com1 {
    position: absolute;
    bottom: 350px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: top left;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;         
}
.decor-bl-squares-com2 {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;        
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-tr-green-com {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;  
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;           
}
.decor-ml-squares-com2 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 350px;
    background: #4bcf7d;
    z-index: 3;   
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;           
}
.decor-ml-squares-com3 {
    position: absolute;
    top: 350px;
    right: 0px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;         
}
.decor-tr-green-news {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;      
    transform-origin: top right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;           
}
.decor-tr-green-news2 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 250px;
    background: #4bcf7d;
    z-index: 3;   
    transform-origin: top;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;              
}
.decor-tl-green-news {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;    
    transform-origin: bottom left;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;         
}
.decor-tl-green-news2 {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;         
transform-origin: top left;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;    
}
.decor-tl-green-news3 {
position: absolute;
    bottom: 0px;
    right: 0px;
    width: 97px;
    height: 97px;
}
.decor-mr-gradient-pill {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    background: #0074b7;
    z-index: 3;       
    transform-origin: top right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;       
}
.decor-mr-gradient-pill-2 {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 50px;
    height: 150px;
    background: #4bcf7d;
    z-index: 3;   
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;           
}
.decor-mr-gradient-pill-w {
    position: absolute;
    top: 0;
    left: 0px;
    width: 50px;
    height: 80%;
    background: #ffffff;
    z-index: 3;       
}
.decor-mr-gradient-pill-news {
    position: absolute;
    top: 30%;
    right: 0px;
    width: 50px;
    height: 100px;
    background: #00b7fe;
    z-index: 3;       
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-mr-gradient-pill-news-g {
    position: absolute;
    top: calc( 30% + 100px );
    right: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;      
    transform-origin: top right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;       
}
.decor-mr-notice-pill{
    position: absolute;
    top: 40%;
    left: 0px;
    width: 50px;
    height: 100px;
    background: #4bcf7d;
    z-index: 3;      
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;       
}
.decor-mr-notice-pill2 {
    position: absolute;
    top: 40%;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-mr-notice-pill3 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 250px;
    background: #0074b7;
    z-index: 3;       
    transform-origin: top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-mr-notice-pill4 {
    position: absolute;
    top: 0px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: top left;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-mr-notice-pill5 {
    position: absolute;
    top: 300px;
    right: 0px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-bl-squares {
    position: absolute;
    top: 20%;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #0074b7;
    z-index: 3;     
    transform-origin: top left;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-bl-squares-2 {
    position: absolute;
    top: calc( 20% + 100px );
    left: 50px;
    width: 50px;
    height: 250px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: bottom left;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-bl-squares-3 {
    position: absolute;
    top: calc( 20% + 350px );
    left: 0px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: top left;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-bl-squares-4 {
    position: absolute;
    top: calc( 20% + 400px );
    left: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;   
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-bl-squares-5 {
    position: absolute;
    top: calc( 20% + 400px );
    right: 100px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3; 
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;          
}
.decor-bl-squares-6 {
    position: absolute;
    top: calc( 20% + 450px );
    right: 50px;
    width: 50px;
    height: 250px;
    background: #00b7fe;
    z-index: 3;    
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;       
}
.decor-bl-squares-7 {
    position: absolute;
    top: calc( 20% + 750px );
    right: 50px;
    width: 50px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;     
    transform-origin: bottom left;
    transform: scale(0);
    animation: growFromleft 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}
.decor-bl-squares-8 {
    position: absolute;
    top: calc( 20% + 500px );
    right: 0px;
    width: 50px;
    height: 450px;
    background: #0074b7;
    border-radius:0% 0% 0px 150px;
    z-index: 3;   
    transform-origin: Top right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;        
}
.decor-bl-squares-9 {
    position: absolute;
    bottom: 100px;
    left: 0px;
    width: 50px;
    height: 150px;
    background: #4bcf7d;
    z-index: 3;    
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromTop 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;       
}
.decor-bl-squares-10 {
    position: absolute;
    bottom: 250px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: #00b7fe;
    z-index: 3;     
    transform-origin: bottom right;
    transform: scale(0);
    animation: growFromCorner 1s cubic-bezier(0.3, 1, 0.16, 1) forwards;
    animation-delay: 0.5s;      
}

.file-link {
    color: #1a9e52;
    text-decoration: underline;
    font-weight: 500;
}
.file-link:hover { color: #0d8343; }

/* Feedback Form Card */
.feedback-card-wrap {
    background: #ffffff;
    border-radius: 50px 50px 0px 0px;
    max-width: 1280px;
    margin: 40px auto 30px auto;
    overflow: hidden;
}
.feedback-card-header {
    background: #0d8343;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 20px;
    text-align: left;
}
.feedback-card-header h3 { margin: 0; font-weight: normal; }

.feedback-form {
    padding: 40px;
}
.form-row, .form-label-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.form-label {
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
    color: #333;
    padding-top: 8px;
}
.label-sub {
    font-size: 12px;
    color: #888;
    font-weight: normal;
}
.form-input {
    flex-grow: 1;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
}
.form-input:focus, .form-textarea:focus {
    border-color: #1a9e52;
}
.form-textarea {
    flex-grow: 1;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 12px 15px;
    font-size: 15px;
    resize: vertical;
    outline: none;
}
.form-radio-group {
    display: flex;
    /* gap: 25px; */
    padding-top: 8px;
}
.form-radio-group label, .radio-inline {
    cursor: pointer;
    font-size: 15px;
    color: #333;
}

/* File Upload Field Area */
.form-file-upload {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.file-hint {
    font-size: 12px;
    color: #666;
}
.file-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.file-upload-btn {
    background: #1a9e52;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}
.file-upload-btn:hover { background: #13793e; }

/* Privacy Box */
.form-privacy-box {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
}
.privacy-note {
    font-size: var(--normal-font-size);
    color: #333;
    margin-bottom: 10px;
}
.privacy-statement-text {
    font-size: var(--normal-font-size);
    color: #505050;
    line-height: 1.6;
    margin-bottom: 15px;
}
.form-agree-row {
    color: #333;
}

/* Contact Info Footer Block inside Section */
.contact-info-block {
    margin: 0 auto;
    color: #505050;
    font-size: var(--basic-font-size);
    line-height: 1.8;
}
.contact-info-block p { margin: 0; }
.contact-info-block .text-small { font-size: 12px; opacity: 0.85; margin-top: 10px; }
.fluent_form_4 .ff-el-input--content,
.fluent_form_5 .ff-el-input--content {
    flex-direction: row;
    display: flex;
    padding-top: 8px;
    gap: 15px;    
}

/* Form Status Messages */
.form-alert { padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; font-weight: bold; }
.form-alert.success { background-color: #e5f4ea; color: #0d8343; border: 1px solid #1a9e52; }
.form-alert.error { background-color: #fee; color: #da291c; border: 1px solid #da291c; }

/* Mobile View Adjustments */
@media (max-width: 992px) {
    /* .council-header { display: none; }  */
    /* .council-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px; } */
    /* .council-row .col-date, .council-row .col-org, .council-row .col-project, .council-row .col-file { width: 100%; } */
    .form-row, .form-label-row { flex-direction: column; gap: 8px; }
    .form-label { width: 100%; padding-top: 0; }
    .feedback-form { padding: 20px; }
    .file-actions { flex-direction: column; align-items: flex-start; }
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .news-layout { flex-direction: column; }
    .news-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .news-page-filter-btn { width: auto; }
    .news-grid { grid-template-columns: 1fr 1fr; }
    .news-main {width:100%;}
    /* .common-row, .common-header { flex-direction: column; } */
    /* .common-col-date, .common-col-title { width: 100%; padding: 5px 0; } */
}

/* Mobile Adjustments for Project Features */
@media (max-width: 992px) {
    .feature-row, .feature-row.reverse {
        flex-direction: column;
        gap: 0px;
        margin:60px -20px;
    }
    
    .feature-img-col, .feature-text-col {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .feature-text-col.align-right { justify-content: flex-start; }
    
    .feature-text-box {
        padding: 40px;
        max-width: 100%;
        background: linear-gradient(90deg,rgba(0, 116, 183, 1) 0%, rgba(0, 89, 127, 1) 100%);
        
    }
    .feature-img-col {
        border-radius: 0px 0px 0px 0px;
    }
    .feature-text-box img {
        display: none;
    }
    
    .feature-text-box h3 { font-size: 20px; }
    .project-features-section {
        padding:60px 0 60px 0;
    }
    .feature-desc-content {
        position: relative;
        padding:0px;
    }
    .benefit-highlight-box .feature-desc-content {
        position:absolute;
        padding: 20px;
    }    
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    
    .hero-bg-wrapper {
        position: relative; /* Image stacks naturally on mobile */
        height: 300px;
    }
    
    .hero-floating-box {
        margin-top: -50px; /* Pulls the gradient box UP over the bottom of the image */
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }
    
    .decor-hero-right-curve { display: none; }

}

@media (max-width: 768px) {
    .station-image-wrapper picture.responsive-picture img {
        border-radius: 0 !important; /* Removes curves for edge-to-edge mobile display */
    }
}
/* Responsive */
@media (max-width: 992px) {
    .page-tabs { flex-wrap: wrap; }
    .split-layout, .split-layout.reverse { flex-direction: column; }
    .split-image, .split-text { width: 100%; }
    .intro-text-box { width: 95%; margin-top: -20px; padding: 20px; }
}

@media (max-width: 768px) {
/* ==========================================================================
       MOBILE TYPOGRAPHY OVERRIDES (Titles & Buttons)
       ========================================================================== */
    .container {
        padding:0 20px;
    }
    /* 1. Global Section Titles (Station Build, Construction, Focus News) */
    .section-title-wrap h2,
    .section-title-wrap h3,
    .station-build-info h3,
    .construction-methods .section-title-wrap h3 {

        line-height: 1.3 !important;
    }
    .progress-subtitle {
        font-size: 19px !important;
    }

    /* 2. Main CTA Buttons (e.g., "發現更多 +") */
    .btn-teal-outline,
    .btn-image-wrapper a,
    .station-build-info .btn-teal-outline,
    .construction-methods .btn-teal-outline {
        font-size: 14px !important; /* Smaller text */
        padding: 8px 24px !important; /* Slightly tighter padding */
    }

    /* 3. Focus News Filter Buttons (e.g., "全部", "工程進度") */
    .news-filters .filter-btn {
        font-size: 14px !important;
        padding: 6px 18px !important;
    }

    /* 4. Focus News Card Titles */
    .news-card .card-title {
        font-size: var(--basic-font-size) !important; /* Keeps the news headlines crisp but not overwhelming */
        line-height: 1.4 !important;
    }       
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px; /* Adds breathing room on edges */
        width: 100%;
    }

    .header-logos {
        display: flex;
        align-items: center;
        gap: 6px; /* Tightens gap between logos */
    }

    .header-logos a img {
        height: 40px; /* Scales logos down to fit mobile */
        width: auto;
        display: block;
    }

    .mobile-menu-toggle {
        display: flex;
        width: 36px; height: 36px; 
        border-radius: 50%; 
        align-items: center; justify-content: center;
        color: #000000; border: none; cursor: pointer;
        padding: 0; flex-shrink: 0;
    }

    .mobile-menu-toggle svg { width: 20px; height: 20px; }

    /* Hide desktop utilities natively */
    .mega-menu-utilities { display: none; }


    /* ==========================================================================
       2. HERO SECTION (TEXT TOP, IMAGE BOTTOM)
       ========================================================================== */
    /* Turn the main wrapper into a column and apply the gradient background */
    .hero-section-wrapper {
        display: flex;
        flex-direction: column;
        /* background: linear-gradient(0deg,rgba(25, 166, 88, 1) 0%, rgba(14, 70, 53, 1) 100%); */
        background-image: url('/wp-content/themes/MTR_HSK/assets/images/hero-section-bg.png');
        min-height: auto;
    }

    /* Hide the large desktop decorative shapes so they don't break the layout */
    .decor-shape .decor-img {
        display: none !important;
    }

    /* Target the container holding your Title to force it to the top */
    .decor-left-middle {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100%;
        padding: 40px 20px; /* Space around the title */
        order: 1; /* Forces Title to the top */
        background-image: url('/wp-content/themes/MTR_HSK/assets/images/mobile-hero-bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }

    .hero-title-text {
        position: relative;
        text-align: center; /* Center the text to match the mockup */
        width: 100%;
        transform: translateY(-40%);
    }

    .hero-title-text h2 {
        font-size: var(--hero-title); /* Large, readable mobile text */
        line-height: 1.3;
        color: #ffffff;
        margin: 0;
        text-shadow: none;
    }

    /* Target the Slider Container to force it below the Title */
    .hero-banner.constrained {
        order: 2; /* Forces Slider to the bottom */
        padding: 0;
        width: 100%;
        min-height: 350px;
        background: transparent;
    }

    .hero-slider {
        position: relative;
        height: 100%;
        width: 100%;
    }

    /* Ensure dots stay inside the image area */
    .slider-dots {
        bottom: 20px;
        z-index: 50;
    }
    /* ==========================================================================
       STATION BUILD (Corrected Mobile Layout)
       ========================================================================== */
    .station-build {
        overflow: hidden !important;
    }

    /* Reset container to block so items can align left naturally */
    .station-build-container {
        display: block !important; 
        width: 100% !important;
        padding: 0 !important;
    }

    /* Left Info Panel (Title, Button, Gradient Box) */
    .station-build-info {
        width: 100% !important;
        display: block !important; 
        padding: 0 20px !important;
        margin-bottom: -100px !important; /* Pulls the Station Image UP behind the gradient box */
        position: absolute !important;
        z-index: 10 !important;
        transform: none !important;
        top:20px;
        left: 0px;
    }

    /* Left-align the title and icon */
    .station-build-info .section-title-wrap {
        display: flex !important;
        justify-content: center !important; /* Forces left alignment */
        align-items: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    .station-build-info h3 {
        text-align: left !important;
        font-size: 32px !important;
        color: var(--primary-blue);
        margin: 0 !important;
    }
    .desc-content .station-build-info h3 {
        color: #fff !important;
    }

    /* Indent the button slightly to line up with the text */
    .station-build-info .btn-image-wrapper {
        display: inline-block !important;
        margin: 0 auto;
        width: 100%;
    }

    .station-build-info .btn-image-wrapper .btn-bg-img {
        width: auto;
        margin: 0 auto;
    }

    /* The Gradient Box (Large, Left-Aligned, Overlapping) */
    .station-desc-box {
        width: 100% !important; 
        height: auto !important; /* Forces the box to be a large square */
        padding: 20px !important;
        margin: 10px auto !important; /* Keeps it locked to the left */
        position: relative !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important; /* Perfectly centers text vertically inside */
        justify-content: center !important; /* Perfectly centers text horizontally inside */
    }

    .title-decorator {
        width: 32px;
        height: 33px;        
    }

    /* Kill the old background image */
    .station-desc-box .desc-bg-img {
        display: none !important;
    }

    .station-desc-box .desc-content h2 {
        color: #ffffff !important;
        font-size: 26px !important;
        text-align: center !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        text-shadow: none !important;
    }

    /* Full Bleed Station Image */
    .station-image-wrapper {
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .station-image-wrapper img.station-main-image {
        width: 100% !important;
        height: 100vh !important;
        display: block !important;
        border-radius: 0 !important; /* Removes curves to touch the screen edges */
        aspect-ratio: 4 / 5;
        object-fit: cover;    
        max-height:100%;    
    }

    /* Hide Social Icons on Mobile */
    .station-socials { 
        display: none !important; 
    }
    /* ==========================================================================
       CONSTRUCTION METHODS (Corrected Mobile Vertical Stack)
       ========================================================================== */
    .construction-methods {
        padding: 40px 0 !important;
        overflow: hidden !important;
    } 

    /* Remove container padding so the divider lines can stretch edge-to-edge */
    .construction-content {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 1. Header Area (Title & Button) */
    .construction-methods .section-header {
        padding: 0 20px !important; /* Add padding back here to keep text aligned */
        margin-bottom: 25px !important;
        text-align: left !important;
        width: 100% !important;
    }

    .construction-methods .section-title-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-bottom: 15px !important;
        width: 100%;
        padding: 0 20px;
    }

    .construction-methods .section-title-wrap h3 {
        color: #ffffff !important;
        margin: 0 !important;
        white-space: nowrap !important; /* Forces the title onto a single line */
    }

    /* Indent button slightly to match the mockup */
    .construction-methods .btn-image-wrapper {
        display: inline-block !important;
        margin:0 auto;
        width:100%;
    }
    .construction-methods .btn-image-wrapper img {
        margin:0 auto;
    }

    /* 2. Hide all floating desktop dots on mobile */
    .method-icons-wrapper .decor-dot {
        display: none !important;
    }

    /* 3. Icon List Area */
    .method-icons-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }

    .method-icons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important; /* Remove gaps, rely on padding */
    }

    /* Stack the icon and text vertically and center them */
    .method-icons .icon-box {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 35px 20px !important; /* Generous spacing top and bottom */
        border-top: 1px solid rgba(255, 255, 255, 0.4) !important; /* The full-width thin white line */
        width: 100% !important;
    }
    .method-icons .icon-box img {
        width: 110px !important; /* Large crisp icons */
        height: auto !important;
        display: block !important;
    }
    .icon-box-imgarea {
        margin-bottom:30px;
        max-width: 100%;
        height: auto;        
    }
    .method-icons .icon-box p {
        color: #ffffff !important;
        font-size: var(--basic-font-size) !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        text-shadow: none !important;
    }
    .construction-methods:after,
    .project-features-section-spacing:before,
    .project-features-section-spacing-2:before {
        display: none !important;
    }
    .project-features-section-spacing:after {
        background-color:#00b7fe;
    }
/* ==========================================================================
       FOCUS NEWS (Mobile Swipe Carousel & Padding/Decor Fixes)
       ========================================================================== */
.focus-news {
        padding: 50px 0 !important;
        overflow: hidden !important;
    }

    /* Force the container to be a block so children can slide horizontally */
    .focus-news-container {
        display: block !important;
        padding: 0 20px;
        width: 100% !important;
    }
    .focus-news-slider {
        padding:0px;
    }

    /* Sidebar text needs to stay aligned with the site padding */
    .focus-news-sidebar {
        padding: 0 20px !important;
        margin-bottom: 25px !important;
    }

    /* Filter buttons now scroll horizontally */
    .news-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 0 20px 15px 20px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }



    /* Clean up the decorative background */
    .focus-news .decor-news { display: none !important; }
    .focus-news .decor-news-rt { 
        display: block !important; 
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 120px !important;
    }


    
    .news-filters::-webkit-scrollbar { 
        display: none !important; /* Hide scrollbar Safari/Chrome */
    }

    .filter-btn {
        flex: 0 0 auto !important; /* Prevent buttons from squashing */
        white-space: nowrap !important;
    }

 

    /* 4. Hide Custom Arrows */
    .carousel-arrow {
        display: none !important; /* Native mobile swiping makes these obsolete */
    }    
    .footer-bottom-bar {
        display:block;
    }
    .disclaimer-text p,
    .dynamic-footer-menu,
    .copyright p {
        font-size: var(--xs-font-size);
    }
    .footer-links .dynamic-footer-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;        
    }
    .copyright {
        padding:20px 0px;
    }
}

/* ==========================================================================
   FRONT PAGE: FOCUS NEWS CAROUSEL FIX
   ========================================================================== */
@media (min-width: 993px) {
    .news-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden; /* Hides the scrollbar on desktop */
        scroll-behavior: smooth; /* Enables smooth sliding */
        gap: 20px;
        flex-grow: 1;
    }
    
    .news-carousel .news-card {
        flex: 0 0 calc(33.333% - 14px) !important; /* Forces exactly 3 cards to fit */
        max-width: calc(33.333% - 14px) !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   HEADER UTILITIES (Top Right Bar)
   ========================================================================== */
.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
/* Ensure full-width background overlays also fade smoothly */
.site-header .menu-item > .sub-menu::before,
.main-navigation .menu-item > .sub-menu::before {
    transition: all 0.3s ease !important;
    transition-delay: 0.1s !important;
}

.site-header .menu-item:hover > .sub-menu::before,
.main-navigation .menu-item:hover > .sub-menu::before {
    transition-delay: 0s !important;
}

.desktop-utilities {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 10px;
}

.desktop-utilities button,
.desktop-utilities a,
.desktop-utilities .language-selector a {
    background: transparent;
    border: none;
    color: var(--text-muted, #666666);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.desktop-utilities button:hover,
.desktop-utilities a:hover,
.desktop-utilities .language-selector a:hover {
    color: var(--primary-teal, #00a680);
}

.desktop-utilities .language-selector ul {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* --- Menu Icons Styling (ACF Integration) --- */
.main-navigation .menu-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.main-navigation .menu-item-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    margin-bottom:0px;
}



/* ==========================================================================
   BUILD STATION PAGE STYLES
   ========================================================================== */
.page-build-station .build-section { padding: 0px 0px 50px; }
.page-build-station .bg-white { background-color: #ffffff; }
.page-build-station .relative { position: relative; overflow: hidden; }

/* --- Overlay Layering System --- */
.station-static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}
.first_caption p {
    font-size: var(--mtitle-font-size);
    text-align: center;
}
.interactive-element {
    pointer-events: auto;
}

/* --- Left Side Elements --- */
.station-pill-btn {
    display: inline-block;
    background: linear-gradient(90deg, #3bb3c3 0%, #1a9e52 100%);
    color: #fff;
    padding: 6px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: -15px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.station-pill-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

/* Restoring the background image styling for the left box */
.station-desc-box {
    position: relative;
    overflow: hidden;
}

.station-desc-box .desc-bg-img {
    display: block;
    width: 100%;
    height: auto;
}

.station-desc-box .desc-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}

/* --- Right Side Blue Box --- */
.station-right-desc {
position: absolute;
    right: 5%;
    bottom: 10%;
    background-color: rgba(43, 122, 159, .8);
    color: #ffffff;
    padding: 30px 40px;
    border-radius: 0px 20px 0px 0px;
    max-width: 350px;
}

.station-right-desc p {
    margin: 0;
    font-size: var(--basic-font-size);
    line-height: 1.8;
}

/* --- Sliding Background Mechanics --- */
.station-build-slider-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 600px;
    overflow: hidden;
    z-index: 1;
}

.station-build-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.station-slide-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

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

/* --- Slider Controls --- */
.station-slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.station-arrow {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.station-arrow:hover {
    background: #ffffff;
    color: #0076c8;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .station-right-desc {
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 0px 30px 0px 0px;
        max-width: 75%;        
        padding: 30px 30px;
    }
    .station-build-slider-wrapper,
    .station-slide-img {
        height: 100vh;    
    }
    .station-slide-img img {
        width: auto;
        height: 100vh;       
        max-height: 100vh; 
    }
    .station-build-info {
        align-items: center;
        width: 100%;      
        top:20px;  
    }
}

/* ==========================================================================
   1. LOCATION SECTION (UPDATED LAYOUT)
   ========================================================================== */
.location-layout {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 2;
    min-height: 75vh;
}

.location-container {
    padding:0 50px;
}

/* Left Blue Text Box */
.location-text-box {
    width: 35vw;
    background-color: #00609c; 
    /* background-image: radial-gradient(circle at 10% 100%, #53d07e 0%, #00b0ff 35%, transparent 65%); */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    cursor: pointer; /* Let users know it is interactive */
}

.card-left-corner img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;  
    width:58%;
}

.location-text-box .section-header {
    margin-bottom: 0;
    text-align: left;
}
.location-text-box .section-title-wrap {
    justify-content: flex-start;
    margin-bottom: 0;
}
.location-text-box .title-text {
    color: #ffffff !important; 
}

/* Center the content and establish a relative container for hover elements */
.location-text-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
}

/* Default Title Styling and Transition */
.location-main-title {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    visibility: visible;
    /* transform: translateY(-20%); */
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;    
}

.location-main-title h1 {
    color: #ffffff;
    font-size: var(--h1-font-size);
    line-height: 1.6;
    margin: 0;
    text-align: center;
    font-weight: normal;
    letter-spacing: 2px;
}

.location-main-title h3 {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.6;
    margin: 0;
    text-align: center;
    font-weight: normal;
    letter-spacing: 2px;
}

/* Hover Description Styling and Transition */
.location-hover-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%); /* Starts slightly lower for a slide-up effect */
    width: 85%;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[lang="en-GB"] .location-hover-desc {
    width: 100%;
    overflow: scroll;
}

html[lang="en-GB"] .location-hover-desc::-webkit-scrollbar {
  display: none;
}

.location-hover-desc p {
    color: #ffffff;
    font-size: var(--stitle-font-size);
    line-height: 1.8;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
html[lang="en-GB"] .location-hover-desc p {
    font-size: var(--normal-font-size);
}

/* --- HOVER ACTIONS --- */

/* 1. Slide up and fade out the main title */
.location-text-box:hover .location-main-title {
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(-20px);  */
}

/* 2. Slide up and fade in the description */
.location-text-box:hover .location-hover-desc {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); /* Centers perfectly */
}

/* Right Empty Map Box */
.location-map-box {
    width: 65%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* Optional light background placeholder */
    margin-top:50px;
}

/* --- New Decorative Shapes --- */

/* Bottom long green bar */
.decor-loc-new-green-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 75%;
    height: 50px;
    background-color: #53d07e;
    z-index: 1;
}

/* Tall cyan rectangle on the bottom left */
.decor-loc-new-cyan-tall {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 50px;
    height: 40vh;
    background-color: #00b0ff;
    z-index: 6; /* Sits above the blue box */
}

.decor-loc-new-greenbox {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: #4bcf7d;
    z-index: 6; /* Sits above the blue box */    
}

/* Small cyan square next to the tall one */
.decor-loc-new-cyan-square {
    position: absolute;
    bottom: 50px;
    left: 100px;
    width: 50px;
    height: 50px;
    background-color: #00b0ff;
    z-index: 6;
}

.decor-loc-new-cyan-square-blue {
    position: absolute;
    top: 250px;
    right: 0px;
    width: 50px;
    height: 50px;
    background-color: #00b0ff;
    z-index: 6;
}
.curved-banner-01 {
    background: #0074b7;
    height: auto;
    /* clip-path: ellipse(100% 50% at 0% 100%); */
    border-radius:0px 50px;
    width: 200px;
}
.curved-banner {
    background: linear-gradient(135deg, #4bcf7d, #4bcf7d);
    height: 100%;
    clip-path: ellipse(100% 100% at 0% 100%);
    width: 100%;
    z-index:2;
    position: relative;
}
.curved-rad-01 {
background: #4bcf7d;
background: radial-gradient(at left bottom, #00b0ff, #4bcf7d);
    width: 100%;
        position: absolute;
    z-index: 3;
    height: 100%;
    top: 0;
}
.curved-rad-center {
background: #0074b7;
    background: radial-gradient(at center, #0074b7, #0074b7);
    /* filter: blur(1px); */
    width: 150px;
    height: 179px;
    position: absolute;
    z-index: 4;
    border-radius: 0% 0% 80%;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Top right green block */
.decor-loc-new-green-tr {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 250px;
    height: 50px;
    background-color: #1a9e52;
    z-index: 1;
}
.decor-loc-new-green-curve {
    position: absolute;
    bottom: 0px;
    right: 75%;
    width: 50px;
    height: 50px;
    background-color: #4bcf7d;
    border-radius: 0% 0% 0% 100%;
    z-index: 1;
}
.decor-loc-new-green-tr-ver {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 250px;
    background: linear-gradient(to bottom, #1a9e52 50px, #0e4635);
    z-index: 1;    
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .location-layout { flex-direction: column; min-height: auto; }
    .location-text-box, .location-map-box { width: 100%; }
    .location-text-box { min-height: 350px; }
    .location-map-box { min-height: 400px; }
    .decor-loc-new-cyan-tall { left: 0; height: 120px; }
    .decor-loc-new-cyan-square { left: 50px; bottom: 0; }
    .decor-loc-new-green-tr { display: none; }
}

/* ==========================================================================
   2. STATION BENEFITS (UPDATED LAYOUT & HOVER)
   ========================================================================== */
.page-build-station .build-section.section-benefits {
    background-color: #eef9f6; /* Pale mint/cyan background */
    padding: 100px 0;
}

.benefits-grid {
    display: flex;
    align-items: stretch;
    /* justify-content: space-between; */
    margin-top: 40px;
    position: relative;
    z-index: 2;
}
.benefits-container {
    padding:0 80px;
}

/* Left Highlight Box */
.benefit-highlight-box {
    flex: 0 0 20%;
    /* background-color: #00609c;  */
    /* Radial gradient matching the location section */
    /* background-image: radial-gradient(circle at 10% 100%, #53d07e 0%, #0076c8 45%, #00609c 80%); */
    border-radius: 0 40px 0 0;
    /* padding: 30px 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-right: 15px;
}

.benefit-highlight-box h3 {
    color: #ffffff;
    font-size: var(--mtitle-font-size);
    line-height: 1.5;
    margin: 0;
    letter-spacing: 1px;
    font-weight: normal;
}
.benefit-icon-section {
display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 40px;
    position: relative;
    z-index: 2;
    width:100%;
}
html[lang="en-GB"] .benefit-highlight-box h3 { font-size: var(--normal-font-size); }

/* Small green square floating next to the highlight box */
/* .decor-ben-green-float {
    position: absolute;
    bottom: 20px;
    right: -35px;
    width: 25px;
    height: 25px;
    background-color: #53d07e;
} */

/* Icon Boxes & Vertical Dividers */
.benefit-icon-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 15px 0;
    position: relative;
    cursor: pointer;
    /* Vertical separator lines */
    border-left: 1px solid #c0c0c0;
}

/* Add border to the right of the last item */
.benefit-icon-box:last-child {
    border-right: 1px solid #c0c0c0;
}

.benefit-icon-box .icon-wrap {
    width: 150px; 
    height: 140px;
    margin-bottom: 20px;
}
.benefit-icon-box .icon-wrap img { width: 80%; height: 100%; object-fit: contain; }

.benefit-icon-box h4 {
    color: #0076c8;
    font-size: var(--mtitle-font-size);
    margin: 0 0 30px 0;
    font-weight: 300;
    min-height: 48px;
    padding-bottom:30px;
}

.benefit-icon-box .icon-arrow {
    width: 24px; height: 24px;
    background: #0076c8; color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    bottom: 0px;    
}
.benefit-icon-box .icon-arrow svg { 
    width: 14px; height: 14px; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


.benefit-hover-box p {
    color: #ffffff;
    font-size: var(--normal-font-size);
    line-height: 1.6;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.benefit-icon-box:hover .benefit-hover-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.benefit-icon-box:hover .icon-arrow svg {
    transform: rotate(180deg);
}

/* --- New Background Decorative Shapes --- */
.decor-ben-white-square {
    position: absolute; top: 10%; right: 19%;
    width: 50px; height: 50px; background-color: #ffffff; z-index: 1;
}
.decor-ben-cyan-right {
    position: absolute; top: 31%; right: 3%;
    width: 50px; height: 50px; background-color: #00b0ff; z-index: 1;
}
.decor-ben-cyan-br {
    position: absolute; bottom: 0; right: 0;
    width: 80px; height: 50px; background-color: #00b0ff; z-index: 1;
}
.decor-ben-green-bl {
    position: absolute; bottom: 50px; left: 0;
    width: 50px; height: 50px; background-color: #53d07e; z-index: 1;
}
.decor-ben-green-tl {
    position: absolute; top: 0px; left: 0;
    width: 50px; height: 50px; background-color: #53d07e; z-index: 1;
}
.decor-ben-cyan-bl {
    position: absolute; bottom: 0px; left: 50px;
    width: 50px; height: 50px; background-color: #00b0ff; z-index: 1;
}
.decor-ben-cyan-bl-2 {
    position: absolute; bottom: 0; left: 0;
    width: 97px; height: 40%; background-color: #0074b7; z-index: 1;    
}
.decor-ben-cyan-bl-3 {
    position: absolute; bottom: 40%; left: 0;
    width: 97px; height: 97px; background-color: #0074b7; z-index: 1;    
    border-radius: 0% 100% 0% 0%;
}
.decor-ben-cyan-bl-4 {
    position: absolute; bottom: 0px; left: 97px;
    width: 50px; height: 50px; background-color: #00b0ff; z-index: 1;
}
.decor-ben-cyan-tr {
    position: absolute; top: 0px; right: 50px;
    width: 50px; height: 40%; background-color: #00b0ff; z-index: 1;    
}
.decor-ben-cyan-tr-2 {
    position: absolute; top: 40%; right: 100px;
    width: 50px; height: 50px; background-color: #4bcf7d; z-index: 1;    
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .benefits-grid { flex-wrap: wrap; justify-content: center; }
    .benefit-highlight-box { flex: 0 0 100%; border-radius: 0 40px 0 0; margin-right: 0; margin-bottom: 20px; }
    .benefit-icon-box { flex: 0 0 100%; border: none; border-bottom: 1px solid #c0c0c0; padding: 20px 0; }
    .benefit-icon-box:last-child { border-bottom: none; border-right: none; }
    .decor-ben-green-float { display: none; }
}
/* --- 3. Station Design Interactive Slider --- */
.section-design { padding-bottom: 0; }
.design-viewport {
    width: 100%;
    height: 88vh;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    /* margin-top: 30px; */
}

.design-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.design-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

.design-slide .design-bg {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* ==========================================================================
   STATION DESIGN - MOBILE STACK
   ========================================================================== */
/* Hide the mobile stack by default on desktop */
.mobile-design-stack {
    display: none;
}
.desktop-design-view {
    display: block;
}

@media (max-width: 992px) {
    /* Hide the desktop slider entirely */
    .mobile-image-wrapper {
        overflow:hidden;
    }
    .desktop-design-view {
        display: none !important;
    }
    
    /* Reveal and format the mobile stack */
    .mobile-design-stack {
        display: block;
        width: 100%;
    }
    
    .mobile-design-block {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 0; /* Ensures flush stacking if required */
    }
    
    /* Ensure images span full width cleanly */
    .mobile-design-block img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transform: scale(1.5);        
    }
    .mobile-design-caption img {
        width:20%;
    }  
    .mobile-design-caption img.award-img {
        width:100%;
        transform: scale(1);
    }        
    
    /* Blue Caption Bar styling based on Screenshot 2026-08-03 at 23.12.43.jpg */
    .mobile-design-caption {
        background-color: #0076c8; /* MTR Blue */
        color: #ffffff;
        padding: 20px 25px;
        text-align: center;
    }
    
    .mobile-design-caption p {
        margin: 0;
        font-size: 15px; /* Adjust to match your var(--normal-font-size) if preferred */
        line-height: 1.5;
    }
    
    /* Flexbox layout for the 3rd caption with the badge */
    .mobile-design-caption.flex-caption {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        text-align: left; /* Align text to the left when badge is next to it */
    }
    
    .mobile-design-caption.flex-caption p {
        flex-grow: 1;
    }
    
    .mobile-design-caption .sustainability-badge {
        width: 50px; /* Restrict badge size */
        height: auto;
        flex-shrink: 0;
    }
}

/* Floating Labels on 3D Render */
/* ==========================================================================
   STATION DESIGN - FLOATING LABELS & ANIMATIONS
   ========================================================================== */
.floating-label {
    position: absolute;
    background-color: rgba(0, 118, 200, .7); /* MTR Blue */
    color: #ffffff;
    padding: 5px 37px 5px 25px;
    
    /* Exact shape from the screenshot */
    border: 1px solid #ffffff; 
    border-radius: 0 40px 0 0; /* Distinct top-right curve */
    
    font-size: 20px;
    font-weight: normal;
    z-index: 10;
    pointer-events: none; /* Prevents text from blocking user clicks on the image */
    white-space: nowrap;
    
    /* --- Smooth Animation Initial State --- */
    opacity: 0;
    transform: translateY(25px); /* Start slightly lower */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    text-align:center;
    line-height: normal;
}


/* Remove the old bottom pointer triangle */
.floating-label::after {
    display: none;
}

/* --- Trigger Animation When Slide is Active --- */
.design-slide.is-active .floating-label {
    opacity: 1;
    transform: translateY(0);
}

/* --- Staggered Delays (Creates the "1, 2, 3 pop-up" effect) --- */
.design-slide.is-active .floating-label.delay-1 { transition-delay: 0.3s; }
.design-slide.is-active .floating-label.delay-2 { transition-delay: 0.6s; }
.design-slide.is-active .floating-label.delay-3 { transition-delay: 0.9s; }

/* Design Floating Controls Box */
.design-controls-box {
    position: absolute;
    bottom: 40px; 
    left: max(5vw, 40px);
    /* background: linear-gradient(135deg, #0072bc 0%, #53d07e 100%); */
    background-image: url('../MTR_HSK/assets/images/card-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;    
    min-height: 350px;
    border-radius: 0 40px 0 0;
    padding: 40px 30px;
    max-width: 300px;
    width: 100%;
    z-index: 20;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
html[lang="en-GB"] .design-controls-box {
    max-width: 300px;
}
html[lang="en-GB"] .design-controls-box h3 {
    color: #ffffff; font-size: var(--stitle-font-size); margin: 0 0 20px 0;
    /* margin-top:25px; */
}
.special-font {
    color: #ffffff; font-size: var(--xstitle-font-size); margin: 0 0 20px 0;
}

.design-controls-box h3 {
    color: #ffffff; font-size: var(--stitle-font-size); margin: 0 0 20px 0;
    /* margin-top:25px; */
}
.special-space {
    width: 100%;
    padding: 0 30px;
    margin-top: -15px;    
}

.captionArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0px 30px;    
}

.design-arrows { display: flex; gap: 15px; justify-content: flex-start;bottom: 25px;
    position: absolute; }
.design-arrow {
    width: 36px; height: 36px;
    border: 1px solid #ffffff; border-radius: 50%;
    background: transparent; color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s;
}
.design-arrow:hover { background: #ffffff; color: #0076c8; }
.design-arrow svg { width: 20px; height: 20px; }


/* --- 4. Timeline Carousel --- */
.timeline-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    position: relative;
}

.timeline-arrow {
    width: 32px; height: 32px; flex-shrink: 0;
    background: #1a9e52; color: #fff; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; z-index: 10;
}
.timeline-arrow:hover { transform: scale(1.1); }
.timeline-arrow svg { width: 18px; height: 18px; }

.timeline-viewport {
    flex-grow: 1;
    overflow: hidden;
}

.timeline-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}
.timeline-track::-webkit-scrollbar { display: none; }

.timeline-item {
    flex: 0 0 calc(25% - 15px); /* Show exactly 4 items on desktop */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.timeline-img {
    width: 100%; aspect-ratio: 16/9;
    border-radius: 8px; overflow: hidden;
    margin-bottom: 15px;
}
.timeline-img img { width: 100%; height: 100%; object-fit: cover; }

.timeline-year {
    font-size: 3.5rem; 
    color: #0074b7; 
    font-weight: bold;
    padding-bottom: 5px;
}

.timeline-content {
    font-size: var(--normal-font-size); color: #0074b7; line-height: 1.6;
}
.timeline-content p { margin: 0 0 5px 0; }
.timeline-content ul {
    padding-left: 1em;
}
/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .location-layout { flex-direction: column; border-radius: 0; }
    .location-text-box, .location-map-box { width: 100%; }
    .location-text-box { border-radius: 0 0 40px 0; }
    
    .benefits-grid { flex-wrap: wrap; justify-content: center; }
    .benefit-highlight-box { flex: 0 0 100%; border-radius: 0 40px 0 0; }
    .benefit-icon-box { flex: 0 0 45%; }
    
    .design-controls-box { bottom: 20px; left: 20px; min-width: 0; width: calc(100% - 40px); }
    .floating-label { display: none; /* Hide complex labels on small mobile screens */ }
    
    .timeline-item { flex: 0 0 calc(80% - 15px); /* Show 1 and a peak of the next on mobile */ }
    .timeline-arrow { display: none; /* Rely on native swiping for mobile */ }
}

/* ==========================================================================
   STATION BENEFITS HOVER EFFECTS
   ========================================================================== */
.benefit-icon-box {
    position: relative; /* Required to position the hover box inside */
    cursor: pointer;
}
.award-img {
    width:45%;
}
/* The Hover Overlay Box */
.benefit-hover-box {
    position: absolute;
    top: 0; 
    left: 0%; /* Slightly wider to give text breathing room */
    width: 100%; 
    height: calc(100% - 45px); /* Covers icon and text, leaves arrow exposed */
    background-image: url('../MTR_HSK/assets/images/card-bg.svg');
    background-repeat:no-repeat;
    background-size: cover;
    padding: 40px 30px;
    z-index: 10;
    
    /* Flexbox to center the text perfectly */
    display: flex;
    align-items: start;
    justify-content: center;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Arrow Transition Setup */
.benefit-icon-box .icon-arrow svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- THE HOVER ACTIONS --- */

/* 1. Show the overlay */
.benefit-icon-box:hover .benefit-hover-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2. Rotate the arrow downwards */
.benefit-icon-box:hover .icon-arrow svg {
    transform: rotate(180deg);
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .benefit-hover-box {
        left: 0;
        width: 100%;
        height: calc(100% - 35px);
    }
}

/* ==========================================================================
   CINEMATIC PRELOADER ANIMATIONS
   ========================================================================== */
.intro-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #ffffff; 
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    overflow: hidden;
}

.intro-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* ==========================================================================
   PHASE 1: TEXT FADE IN & FADE OUT (TOP/BOTTOM)
   ========================================================================== */
.preloader-text {
    position: absolute;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.text-line-1, 
.text-line-2 {
    color: #0076c8;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 4px;
    margin: 0;
    opacity: 0; /* Ensures they are invisible initially */
}

.text-line-1 { animation: textInTop 1.8s ease-in-out forwards 0.2s; }
.text-line-2 { animation: textInBottom 1.8s ease-in-out forwards 0.2s; }

@keyframes textInTop {
    0%   { opacity: 0; transform: translateY(-40px); }
    15%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); } /* Fades out smoothly */
}

@keyframes textInBottom {
    0%   { opacity: 0; transform: translateY(40px); }
    15%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); } /* Fades out smoothly */
}

/* --- Phase 2-4: Center Reveal Window --- */
.intro-center-reveal {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 150px 0 150px 0; /* Creates the leaf shape */
    overflow: hidden;
    opacity: 0;
    transform: scale(0.5);
    z-index: 5;
    /* Starts after text (1.5s), runs for 3.5s */
    animation: centerRevealAnim 3.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards; 
}

/* The gradient mask inside the center window */
.intro-leaf-gradient {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 100% 100%, #53d07e 0%, #00b0ff 45%, #00609c 100%);
    z-index: 2;
    /* Fades out to reveal the image underneath */
    animation: gradientFadeAnim 1s ease forwards 3.8s;
}

/* The station image hiding underneath */
.intro-station-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Center Animation Keyframes: Shape Formation -> Rotation -> Expansion */
@keyframes centerRevealAnim {
    0%   { opacity: 0; transform: scale(0.5) rotate(0deg); border-radius: 150px 0 150px 0; width: 350px; }
    15%  { opacity: 1; transform: scale(1) rotate(0deg);   border-radius: 150px 0 150px 0; width: 350px; } /* Shape formed */
    30%  { transform: scale(1) rotate(45deg);  border-radius: 150px 0 150px 0; width: 350px; } /* Diamond rotation */
    45%  { transform: scale(1) rotate(45deg);  border-radius: 150px 0 150px 0; width: 350px; } /* Hold diamond */
    60%  { transform: scale(1) rotate(0deg);   border-radius: 0; width: 350px; } /* Square up corners */
    100% { opacity: 1; transform: scale(1) rotate(0deg); border-radius: 0; width: 75vw; } /* Expand horizontally */
}

@keyframes gradientFadeAnim {
    to { opacity: 0; }
}

/* --- Phase 5: Outer Framing Shapes --- */
.intro-outer-frame {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25vw;
    height: 70vh;
    background-image: radial-gradient(circle at 100% 100%, #53d07e 0%, #00b0ff 45%, #00609c 100%);
    z-index: 3;
    opacity: 0;
}

/* Left outer frame with curved bottom-right corner */
.frame-left {
    left: -200px; /* Start off-screen */
    border-radius: 0 0 200px 0;
    animation: frameSlideLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 4.2s;
}

/* Right outer frame with curved top-left corner */
.frame-right {
    right: -200px; /* Start off-screen */
    border-radius: 200px 0 0 0;
    animation: frameSlideRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 4.2s;
}

@keyframes frameSlideLeft {
    to { left: 0; opacity: 1; }
}
@keyframes frameSlideRight {
    to { right: 0; opacity: 1; }
}

/* ==========================================================================
   VIDEO REFERENCE PRELOADER - TIMINGS & ANIMATIONS
   ========================================================================== */
.video-preloader {
    position: fixed;
    inset: 0; /* Shorthand for top, right, bottom, left 0 */
    background-color: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.video-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* --- Phase 1: Text Animation --- */
.preloader-text {
    position: absolute;
    z-index: 10;
    text-align: center;
    opacity: 0;
    /* Fades in at 0.5s, lasts for 2.5s */
    animation: textSeq 2.5s ease-in-out forwards 0.5s;
}

.preloader-text h2 {
    color: #0076c8;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 4px;
    margin: 0;
}

@keyframes textSeq {
    0%   { opacity: 0; transform: translateY(20px); }
    15%  { opacity: 1; transform: translateY(0); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* ==========================================================================
   PHASE 2 & 3: TOP/BOTTOM STACK -> 90 DEGREE ROTATION -> LEFT/RIGHT SPLIT
   ========================================================================== */
.preloader-svg-group {
    position: absolute;
    z-index: 5;
    /* Match the exact width and height of your landscape layout (600px by 350px) */
    width: 600px; 
    height: 350px; 
    
    animation: 
        /* Rotates at 2.1s, takes 1.2s */
        groupRotate90 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards 2.1s,
        /* Enlarges at 3.5s, takes 2s */
        groupEnlarge 1.2s ease-out forwards 3.5s;    
        /* groupRotate90 2s cubic-bezier(0.65, 0, 0.35, 1) forwards 3.5s,
        groupEnlarge 3.2s ease-out forwards 5.8s; */
}

@keyframes groupRotate90 {
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(90deg) scale(1); } 
}
@keyframes groupEnlarge {
    0%   { transform: rotate(90deg) scale(1); }
    100% { transform: rotate(90deg) scale(1.25); } 
}

/* Ensure both halves span the full 100% width of the 600px container */
.svg-half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%; /* Each takes half the height (175px each) */
    opacity: 0; 
}

.top-half {
    top: 0;
    /* animation: 
        slideFadeInTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.5s,
        slideOutTop 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 5.8s; */
animation: 
        /* Slides in at 1.5s, takes 0.6s */
        slideFadeInTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.5s,
        /* Slides out at 3.5s, takes 0.8s */
        slideOutTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 3.5s;        
}

.bottom-half {
    bottom: 0;
    /* animation: 
        slideFadeInBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.5s,
        slideOutBottom 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 5.8s; */
animation: 
        /* Slides in at 1.5s, takes 0.6s */
        slideFadeInBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.5s,
        /* Slides out at 3.5s, takes 0.8s */
        slideOutBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 3.5s;        
}

/* --- IMAGE 1: Slide In Horizontally --- */
/* Top half slides in from the Right, pointing Left */
@keyframes slideFadeInTop {
    0%   { transform: translateX(60vw) translateY(0); opacity: 0; }
    100% { transform: translateX(0) translateY(0); opacity: 1; }
}

/* Bottom half slides in from the Left, pointing Right */
@keyframes slideFadeInBottom {
    0%   { transform: translateX(-60vw) translateY(0); opacity: 0; }
    100% { transform: translateX(0) translateY(0); opacity: 1; }
}

/* --- IMAGE 2: Slide Out Horizontally (After 90deg Rotation) --- */
/* Because the group rotated 90 degrees clockwise, the Top Half is now visually on the Right.
   To move it further right on the screen, it moves UP along its internal Y-axis (-35vw). */
@keyframes slideOutTop {
    0%   { transform: translateX(0) translateY(0); }
    100% { transform: translateX(0) translateY(-35vw); } 
}

/* The Bottom Half is now visually on the Left. 
   To move it further left on the screen, it moves DOWN along its internal Y-axis (35vw). */
@keyframes slideOutBottom {
    0%   { transform: translateX(0) translateY(0); }
    100% { transform: translateX(0) translateY(35vw); } 
}

/* Ensured SVGs are visible and never clipped */
.svg-half svg { 
    width: 100%; 
    height: 100%; 
    display: block; 
    overflow: visible; 
}

/* ==========================================================================
   PHASE 4: IMAGE REVEAL (HORIZONTAL EXPANSION)
   ========================================================================== */
.preloader-image-mask {
    position: absolute;
    z-index: 1;
    width: 70vw; 
    height: 350px; 
    
    /* Collapses to a single invisible line in the horizontal center */
    clip-path: inset(0 50% 0 50%); 
/*     
    animation: 
        revealImageHoriz 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 5.8s,
        expandSection 3.2s ease-out forwards 5.8s; */
animation: 
        /* Mask opens at 3.5s, takes 0.8s */
        revealImageHoriz 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 3.5s,
        /* Frame expands at 3.5s, takes 2s */
        expandSection 1.2s ease-out forwards 3.5s;        
}

.preloader-image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* animation: innerZoom 3.2s ease-out forwards 5.8s; */
    animation: innerZoom 1.2s ease-out forwards 3.5s;
}

/* Opens the mask horizontally to match the SVGs */
@keyframes revealImageHoriz {
    0%   { clip-path: inset(0 50% 0 50%); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes expandSection {
    0%   { transform: scale(1); }
    100% { transform: scale(1.25); } 
}
@keyframes innerZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); } 
}

@media only screen and (min-width: 1920px) {
    .container {
        max-width: 1920px;
    }  
    .hero-section-wrapper {
        max-height:85vh;
    }      
    .header-logos img {
        height:50px;
    }
    .header-logos .logo-newlines img {
        height:78px;
    }    
    .decor-left-top {
        width:390px;
    }
    .decor-left-bottom {
        width:440px;
    }
    .decor-left-bottom-02 {
        left:390px;
    }
    .hero-title-text,
    .decor-left-middle .decor-img {
        width:100%;
    }
/*    
    .container {
        max-width: 1440px;
    }
    .location-container {
        max-width: 1920px;
    }      */
}
.mobile-design {
    display: none;
}
.desktop-design {
    display: block;
}
@media only screen and (max-width:992px) {
    .location-main-title h1 {
        font-size: 30px;
    }
    .location-layout {
        min-height: 470px;
    }
    .location-container {
        padding:0px;
    }
    .decor-loc-new-green-tr-ver,
    .decor-loc-new-cyan-square-blue,
    .decor-loc-new-green-bar,
    .decor-loc-new-cyan-tall,
    .decor-loc-new-cyan-square,
    .decor-loc-new-green-curve,
    .decor-loc-new-greenbox,
    .decor-ben-green-tl,
    .decor-ben-cyan-bl-2,
    .decor-ben-cyan-bl-3,
    .decor-ben-cyan-bl-4,
    .decor-tl-green-com,
    .mobile-deco,
    .decor-bl-squares-com1,
    .decor-bl-squares-com,
    .decor-bl-squares-com2,
    .decor-mr-gradient-pill-w,
    .decor-mr-gradient-pill-news,
    .decor-mr-gradient-pill-news-g,
    .decor-mr-notice-pill,
    .decor-mr-notice-pill2,
    .decor-mr-notice-pill3,
    .decor-mr-notice-pill4,
    .decor-mr-notice-pill5 {
        display: none;
    }
    .decor-tr-green-com {
        width:150px;
    }
    .decor-ml-squares-com2 {
        height:100px;
    }
    .decor-ml-squares-com3 {
        top:100px;
    }
    .page-build-station .build-section {
        padding: 0px;
    }
    .desc-bg-img {
        width: auto;
    }
    .decor-ben-cyan-tr {
        right: 0px;
        height: 10%;
    }
    .decor-ben-cyan-tr-2 {
        top: 10%;
        right: 50px;
    }    
.timeline-track {
        /* Adds padding to the left and right so the first and last cards can sit perfectly in the center of the screen */
        padding: 0 15vw;
        padding-bottom: 20px; /* Keeps the bottom spacing */
    }

    .timeline-item { 
        /* Reduces the width of the card to 70% so the adjacent cards are clearly visible */
        flex: 0 0 100%; 
        /* Forces the browser to snap the card to the middle of the screen instead of the left edge */
        scroll-snap-align: center; 
    }
    
    .timeline-arrow { display: none; /* Rely on native swiping for mobile */ }     
/* Ensure the wrapper takes 100% of the screen and enables smooth touch scrolling */
    .common-table-wrap, 
    .council-table-wrap {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Enables native-feeling smooth swipe on iOS */
    }

    /* Force the rows to maintain a minimum width so the columns don't squish */
    .common-header, 
    .common-row, 
    .council-header, 
    .council-row {
        min-width: 750px; /* Forces the table to be wider than the phone screen */
    }  
    .section-title-wrap h2, .section-title-wrap h3, .station-build-info h3, .construction-methods .section-title-wrap h3 {
            font-size: var(--title-font-size) !important;    
    }    
    .station-desc-box .desc-content .station-main-title h3 {
        color:#fff;
    }
    .hero-section-wrapper {
        max-height: 60vh;
    }
    .decor-left-top-01 {
        width: calc(50px * .7);
    }
    .decor-left-top {
        width: calc(350px * .7);
    }
    .decor-left-bottom {
        width: calc(400px * .7);
    }
    .decor-left-bottom-02 {
        left: calc(350px * .7);
        width: calc(50px * .7);
        height: calc(50px * .7);        
    }
    .decor-hero-right-top {
        width: calc(150px * .7);        
    }
    .decor-hero-right-top-02 {
        right: calc(100px * .7);
        width: calc(50px * .7);
        height: calc(50px * .7);        
    }
    .decor-hero-right-bottom {
        width: calc(100px * .7);    
    }
    .decor-right-svg {
        width: calc(100px * .7);
        height: calc(100px * .7);        
    }
    .decor-hero-right-bottom-02 {
        width: calc(100px * .7);
    }
    .decor-hero-right-bottom-03 {
        width: calc(100px * .7);
        height: calc(100px * .7);
    }
    .decor-left-middle .decor-img,
    .hero-title-text {
        width: 63%;
    }
   /* 3. News Carousel (Horizontal Swipe) */
    .focus-news-content {
        width: 100% !important;
        transform: none !important;
    }
    /* The Carousel: This is the core fix */
    .news-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important; /* Forces the "snap" effect */
        gap: 15px !important;
        padding: 0 20px 30px 20px !important; /* Left/Right padding keeps content aligned */
        scrollbar-width: none !important;
        grid-template-columns: none !important; /* Completely kill the desktop grid */
        margin-left:20px;
    }    

    .news-card {
        flex: 0 0 82% !important; /* Takes up 82% of width, leaving room for the next card */
        scroll-snap-align: start !important; /* Snaps neatly to the left */
        margin: 0 !important;
        max-width: none !important;
        width: auto !important;
    }        
}
@media only screen and (max-width:1680px) {
    .main-navigation > ul > li {
        width: 145px;
    }
    html[lang="en-GB"] .main-navigation > ul > li {
        width: 160px;
    }    
    html[lang="en-GB"] .main-navigation > ul > li > a { font-size: .8rem; }
}
@media only screen and (max-width:768px) {
    .decor-left-top-01,
    .decor-left-top,
    .decor-left-bottom,
    .decor-left-bottom-02,
    .decor-hero-right-top,
    .decor-hero-right-top-02,
    .decor-hero-right-bottom,
    .decor-right-svg,
    .decor-hero-right-bottom-02,
    .decor-hero-right-bottom-03,
    .decor-second-right-top,
    .decor-second-right-bottom,
    .mobile-deco,
    .location-main-title,
    .decor-ben-green-tl,
    .decor-ben-cyan-bl-2,
    .decor-ben-cyan-bl-3,
    .decor-ben-cyan-bl-4 {
        display: none;
    }
    .decor-second-right-bottom-2 {
        background: #4bcf7d;
    }
    .decor-second-left-bottom {
    bottom: 0px;
    left: auto;
    right: 0px;
    width: 100px;
    height: 50px;
    background: #4bcf7d;
    z-index: 3;        
    }
    .location-hover-desc {
        display: block;
        transform: none;
        position: relative;
        opacity: 1;
        visibility: visible;
        width: 100%;
        left: 0;
        padding-top: 30px;                        
    }
    .location-container {
        padding:0px;
    }    
    .benefits-grid.scroll-reveal {
        display: block;
    }
    .benefit-hover-box {
        background-size: cover;        
    }
    .mobile-design {
        display: block;
        margin: 0 auto;
    }
    .desktop-design {
        display: none;
    }
    .location-main-title h1 {
        font-size: 28px;
    }
    .decor-ben-cyan-tr {
        right: 0px;
        height: 10%;
    }
    .decor-ben-cyan-tr-2 {
        top: 10%;
        right: 50px;
    }    
    .timeline-track {
        /* Adds padding to the left and right so the first and last cards can sit perfectly in the center of the screen */
        padding: 0 15vw;
        padding-bottom: 20px; /* Keeps the bottom spacing */
    }

    .timeline-item { 
        /* Reduces the width of the card to 70% so the adjacent cards are clearly visible */
        flex: 0 0 100%; 
        /* Forces the browser to snap the card to the middle of the screen instead of the left edge */
        scroll-snap-align: center; 
    }
    
    .timeline-arrow { display: none; /* Rely on native swiping for mobile */ }    
    .timeline-container {
        padding: 0px;
    }
    .fluent_form_5 .ff-el-group.form-radio-group {
        display:block;
    }
    .fluent_form_5 .ff-el-input--content {

    }
    .fluent_form_5 .ff-el-group.form-radio-group .ff-el-input--content {
        display:flex;
        gap:10px;
        max-width:100%;
    }
    .news-grid {
        grid-template-columns: 1fr;        
    }
    .tech-card-header h4 {
        font-size:20px;
    }
    .bg-construction-mobile {
        display: block;
    }
    .bg-construction-corner,
    .bg-construction-main {
        display: none;
    }
    .decor-left-middle .decor-img,
    .hero-title-text {
        width: 100%;
    }    
}
@media only screen and (max-width:480px) {
    .tech-card-header h4 {
        font-size:16px;
    } 
    .station-build-info .station-desc-box {
        max-width: auto !important;        
    }   
    .station-right-table {
        overflow: auto;
        width: 300px;        
    }  
    .construction-phase-table {
        width: 500px;        
    }
    .construction-content .section-title-wrap h3 {
        font-size: var(--mtitle-font-size) !important;
    }
    html[lang="en-GB"] .innovation-section .pill-title, html[lang="en-GB"] .project-features-section .pill-title {
        line-height: 28px;
    }
}

/* ==========================================================================
   MOBILE UTILITIES (Inside Burger Menu)
   ========================================================================== */
/* Hide the cloned mobile utilities on desktop screens */
.mobile-utilities,
.mobile-social {
    display: none;
}
.mobile-social {
    display:none !important;
    padding:20px;
    gap: 10px;
}
.mobile-social a{
    width: 25px;
    height: 25px;
}

    /* display: flex;
    align-items: center;
    justify-content: space-between; */
nav.main-navigation.is-open.is-active .menu-item-has-children:after {
    /* content: "";
    background: url(assets/images/menu_arrow.svg);
    width: 30px;
    height: 6px;
    display: block;
    filter: invert(1);
    background-repeat: no-repeat; */

}

@media (max-width: 1199px) {
    .station-build-info .station-desc-box {
        max-width: 240px !important;        
        min-height: 240px !important;
    }
    .station-build-info .station-desc-box .station-main-title h3 {
        font-size: var(--desc-font-size) !important;
    }
    .station-desc-box .desc-content p {
        font-size: var(--normal-font-size);
    }
    .station-desc-box .station-hover-desc p {
        font-size: var(--stitle-font-size);
    }    
    .right-deco-section,
    .decor-second-left-bottom {
        display: none;
    }
}
.a2a_floating_style {
    z-index: 3;
}

@media screen and (max-width: 1600px) {
    .location-hover-desc p {
        font-size: var(--normal-font-size);
    }
    .location-text-box {
        width: 40vw;
        border-radius:0px;
    }
}
@media only screen and (max-width:1280px) {
    .page-community .container,
    .page-news-listing .container {
        max-width:900px;
    }
    .location-text-box {
        width: 50vw;
        border-radius:0px;
    }
    .location-main-title h1 {
        font-size: var(--title-font-size);
    }    
    html[lang="en-GB"] .location-hover-desc p {
        font-size: var(--basic-font-size);
    }
    .build-section.section-timeline .decor-shape {
        display:none;
    }
    .design-controls-box h3 {
        font-size: 1.4rem;
    }
    .design-controls-box,
    html[lang="en-GB"] .design-controls-box {
        min-height: 320px;
        max-width: 240px;
    }
    html[lang="en-GB"] .design-controls-box h3 {
        font-size: var(--normal-font-size);
    }
    .floating-label {
        font-size: var(--normal-font-size);
    }
}
@media screen and (max-width:1024px) {
    .location-layout {
        flex-direction: column;
        border-radius: 0;
    }
    .location-container {
        padding:0px;
    }   
    .build-section .decor-shape {
        display:none;
    } 
    .location-map-box,
    .location-text-box {
        width:100%;
    }
    .location-text-box {
        min-height:65vh;
    }
    .location-map-box {
        margin-top:0px;
    }
    .benefits-grid {
        flex-direction: column;
    }
    .benefit-highlight-box {
        width:fit-content;
    }
    .benefit-icon-section {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .benefit-icon-box:last-child {
        border-bottom: 1px solid #c0c0c0;
    }
    .location-hover-desc {
        top:0px;
        left:0px;
        transform: translate(0%, 0%);
    }
    .location-text-box:hover .location-hover-desc {
        transform: translate(0%, 0%);
    }
        /* Reveal the utilities only inside the mobile menu */
    .mobile-utilities{
        display: flex !important;
        flex-direction: row; /* Aligns them in a row */
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        margin-top: 20px;
        border-top: 1px solid #e0e0e0; /* Adds a separator line above them */
        width: 100%;
    }

    .mobile-social {
        display: none !important;
        flex-direction: row; /* Aligns them in a row */
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0px 20px;
        margin-top: 20px;
        width: 100%;
    }
    
    /* Optional: Ensure text inside the utilities is legible on mobile */
    .mobile-utilities a, 
    .mobile-utilities span,
    .mobile-social a {
        font-size: 16px;
        padding:0px;
    } 
}
@media screen and (max-width:769px) {
    .benefit-icon-section {
        display:grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* MOBILE FIX FOR LABELS */
@media (max-width: 992px) {
    .mobile-label {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding: 0px 19px 0px 12px;
        /* Re-apply whatever background/styling your main floating-label has if needed */
    }
    .mobile-label p {
        font-size: 16px !important;
        padding: 4px 8px !important;
        margin: 0;
        border-radius: 4px;
    }
}

/* MOBILE FIX FOR LABELS */
@media (max-width: 768px) {
    .mobile-label p {
        font-size: 10px !important;
    }

}
@media (max-width: 1440px) {
    .main-navigation > ul > li {
        width: 120px;
    }
    html[lang="en-GB"] .main-navigation > ul > li {
        width: 140px;
    }
    .main-navigation > ul > li a,
    .desktop-utilities a {
        font-size: .8rem;
    }
    .desktop-utilities a, .desktop-utilities .language-selector a {
        font-size: .8rem;
    }    
    .desktop-utilities {
        margin-right: 0px;
        margin-left: 10px;
        gap: 15px;
    }
    .header-logos {
        gap: 20px;
    }
    .main-navigation > ul {
        gap: 10px;
    }
    .header-logos img { height: 35px; object-fit: contain; }
    .header-logos .logo-newlines img {height:50px;}   
    .home-icon img {
        height: 20px;
    } 
    .font-size-btn button#smaller {
        font-size: .8rem !important;
    }
    .font-size-btn button#bigger {
        font-size: 1rem !important;
    }
    .location-main-title h1 {
        font-size: var(--title-font-size);
    }
    html[lang="en-GB"] .location-hover-desc {
        width: 100%;
        overflow: scroll;
        height: 300px;    
    }
}

/* Mobile Responsiveness for Utilities Bar */
@media (max-width: 1024px) {
    .desktop-utilities {
        display: none;
    }  
    .main-navigation > ul > li {
        width: 100% !important;
    }    
}
@media screen and (max-height: 768px) {
    .location-hover-desc {
        height: 200px;
        overflow: scroll;
        width: 100%;
    }
    
}
@media screen and (max-width: 1280px) and (max-height: 768px) {
    
    .benefit-hover-box p,
    html[lang="en-GB"] .benefit-highlight-box h3 {
        height:150px;
        overflow: scroll;
    }
    .benefit-hover-box p::-webkit-scrollbar,
    html[lang="en-GB"] .benefit-highlight-box h3::-webkit-scrollbar {
        display: none;
    }
    .project-features-section .decor-shape,
    .environment-section .decor-shape,
    .focus-news .decor-news {
        display:none;
    }
    
}
@media only screen and (min-width: 1920px) {
    html[lang="en-GB"] .main-navigation > ul > li > a {
        font-size: 1.1rem;
    }
    html[lang="en-GB"] .main-navigation > ul > li {
        width: 230px;
    }
    .main-navigation .sub-menu a {
        font-size: 1rem;
    }    
}
.mm-suc-p-page--tpl-aurora-haze .mm-suc-p-page-card {
	max-width:1280px;
}