<style>
        :root {
            --dark-teal: #004549;
            --bright-cyan: #DD18FF;
            --light-mint: #B8FFE7;
			--bright-mint: #00FFD3;
			--lime-green: #C6FF0D;
			--light-green: #E6FFA4;
            --white: #ffffff;
            --text-light: #f8f8f8;
        }

		 body {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
            background-color: #004549;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

		/* Header Styles */
        header {
            background-color: #ffffff;
            padding: 0px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #004549;
        }

        .logo-placeholder {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1;
        }

		.logo-placeholder img {
			width: 186px;
		}

        .header-title {
            font-size: 1.5rem;
            font-weight: 400;
        }

        .header-title strong {
            font-weight: 700;
        }

		/* Main Content Styles */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
            text-align: center;
        }

		.status-badge {
            border-radius: 8px;
            padding: 15px 40px;
            font-size: 1.6rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 30px;
        }

		.intro-text {
            font-size: 1rem;
            font-weight: 400;
            margin-bottom: 10px;
            color: #e0e0e0;
        }

		.instruction-text {
            font-weight: 600;
            margin-bottom: 20px;
        }

		/* Document Tiles */
        .tiles-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1000px;
        }

        .doc-tile {
            width: 210px;
            height: 230px;
            background-color: #00FFD3;
            border-radius: 12px;
            text-decoration: none;
            color: #004549;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            transition: background-color 0.3s ease, transform 0.2s ease;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            padding: 20px; /* Added padding back in */
            box-sizing: border-box;
            display: block;
        }

        .doc-tile:hover {
            background-color: #B8FFE7;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }

        /* Default Tile State */
        .tile-default {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        /* Styling specifically for your icon image */
        .tile-icon-img {
            width: 80px; 
            height: 80px;
            object-fit: contain; /* Prevents your icon from stretching */
            margin-bottom: 15px;
        }

        .tile-title {
            font-weight: 700;
            font-size: 1.1rem;
            line-height: 1.2;
        }

        /* Hover Tile State */
        .tile-hover {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
            padding-top: 10px;
        }

        .tile-hover .tile-title {
            margin-bottom: 15px;
        }

        .tile-desc {
            font-size: 0.85rem;
            font-weight: 500;
            line-height: 1.4;
        }

        /* Hover Interaction Logic */
        .doc-tile:hover .tile-default { display: none; }
        .doc-tile:hover .tile-hover { display: flex; }

		/* Back Button */
        .back-btn {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 65px;
            height: 65px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.2s ease;
			z-index: 100;
        }

        .back-btn:hover {
            transform: scale(1.05);
        }

        .back-icon {
            width: 35px;
            height: 35px;
			stroke: #004549;
            stroke-width: 2;
        }

		/* Button Section */
        .btn-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            width: 100%;
            max-width: 900px;
        }

        .portal-btn {
            flex: 1;
            padding: 30px 20px;
            border-radius: 12px;
            text-decoration: none;
            color: #004549;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .portal-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .btn-perm { background-color: #00FFD3; }
        .btn-ktw { background-color: #B8FFE7; }

        .btn-title {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .btn-sub {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* Values Section */
        .values-outer {
            position: relative;
            width: 100%;
            max-width: 900px;
            margin-top: 20px;
        }

        .values-box {
            border: 2px solid #ffffff;
            border-radius: 30px;
            padding: 40px 20px 60px 20px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }

        .value-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.9rem;
        }

        .icon-placeholder {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

		.icon-placeholder img {
            width: 80px;
        }

        .value-item p {
            margin: 0;
            line-height: 1.4;
        }

        .value-item strong {
            display: block;
            color: #ffffff;
        }

        /* Bottom Overlapping Button */
        .learn-more-btn {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ffffff;
            color: #004549;
            padding: 15px 40px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            white-space: nowrap;
            transition: background-color 0.2s;
        }

        .learn-more-btn:hover {
            background-color: #B8FFE7;
        }

		/* Inline Purpose Image */
        .inline-purpose-img {
            display: block;
            width: 100%;
            max-width: 860px; /* Matches the content width inside the values-box perfectly */
            margin-top: 60px; /* Creates space below the overlapping white button */
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
			.btn-container { flex-direction: column; }
            .values-box { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
            header { flex-direction: column; text-align: center; gap: 10px; }
            .back-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; }
            .back-icon { width: 25px; height: 25px; }
        }
}