h1 {
     font-family: Impact, Arial Black, sans-serif;
     color: #000;
}
/* --- Container layout --- */
 .nav-tile-container {
     display: flex;
     flex-wrap: nowrap;
     gap: 1.0rem;
     justify-content: flex-start;
     margin: 2rem 0;
     overflow-x: auto;
}
/* --- Each tile --- */
 .nav-tile {
     display: flex;
     flex-direction: column;
     width: 150px;
     background: #fff;
     border: 1px solid #ddd;
     overflow: hidden;
}
/* --- Title --- */
 .nav-tile-title {
     height: 60px;
     background-color: #000;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding-top: 0.5rem;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     box-sizing: border-box;
}
 .nav-tile-title h3 {
     font-size: 0.75rem;
     font-weight: 800;
     color: #fff;
     margin: 0;
     text-align: center;
}
/* --- Image wrapper --- */
 .nav-tile-image-wrapper {
     height: 100px;
     background-color: #000;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     padding: 0;
     box-sizing: border-box;
     overflow: hidden;
}
 .nav-tile-image-wrapper img {
     height: 100%;
     width: auto;
     display: block;
}
/* --- Optional centered full-width image class --- */
 .nav-tile-image-wrapper.centered img {
     width: 100%;
     height: auto;
     object-fit: contain;
     margin: 0 auto;
}
 .nav-tile-image-centered {
     height: 100px;
    /* fixed height for uniformity */
     background-color: #000;
     display: flex;
     justify-content: center;
    /* center horizontally */
     align-items: center;
    /* center vertically */
     overflow: hidden;
     padding-bottom: 10px;
}
 .nav-tile-image-centered img {
     max-width: 100%;
    /* fill width if possible */
     max-height: 100%;
    /* fill height if needed */
     width: auto;
    /* preserve aspect ratio */
     height: auto;
    /* preserve aspect ratio */
     display: block;
     object-fit: contain;
    /* ensures full image is visible without crop */
}
/* --- Bottom wrapper (text + links + button area) --- */
 .nav-tile-bottom {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
     padding: 0.4rem;
     border: 1px solid #000;
     gap: 0.2rem;
     height: 55px;
    /* 🔹 fixed height for uniform tile bottoms */
     box-sizing: border-box;
}
/* --- Tile text content (can include links or small paragraphs) --- */
 .tile-text {
     font-size: 0.85rem;
     color: #000;
     line-height: 1.3;
     margin: 0;
}
/* --- Two stacked text links --- */
.tile-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
}

.tile-links a {
    display: inline-block;
    text-decoration: underline;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 12px; /* space for bullet/arrow */
}

.tile-links a::before {
    content: "›";          /* bullet/arrow here */
    position: absolute;
    left: 0;
    top: 0;
    color: #000;           /* match text color */
    font-weight: 700;
}

.tile-links a:hover {
    color: #cbb682;
    text-decoration: none;
}

.tile-links a:hover::before {
    color: #cbb682;        /* arrow changes color on hover too */
}

/* --- Explore button --- */
 .tile-button {
     display: inline-block;
     width: 100px;
     background-color: #cbb682;
     color: #000;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 0.6rem;
     padding: 0.25rem 0;
    /* 🔹 reduced height */
     text-align: center;
     text-decoration: none !important;
     border: 2px solid #cbb682;
     transition: all 0.3s ease;
}
 .tile-button span {
     margin-left: 0.5rem;
     transition: margin-left 0.3s ease;
}
 .tile-button:hover {
     background-color: #000;
     color: #cbb682;
     border-color: #000;
     padding-left: 1rem;
     padding-right: 1rem;
}
 .tile-button:hover span {
     margin-left: 0.75rem;
}