:root {
  /* Layout */
  --gap: 1rem;
  --padding-x: clamp(1rem, 4vw, 6rem);   /* Safer horizontal padding */
  --padding-y: clamp(2rem, 10vw, 10rem); /* Vertical spacing */

  /* Tile Heights */
  --tile-min-height: clamp(250px, 45vw, 900px);
  --tile-small-height: clamp(180px, 25vw, 400px);
  --tile-radius: 1.5rem;
  --tile-padding: 2.5rem;
  --tile-shadow: inset 0 0 0 1.5px #ffffff30;
  --tile-blur: 10px;

  /* Fonts */
  --h3-size-large: clamp(3rem, 3vw + 1rem, 5rem);
  --h3-size-small: clamp(1.5rem, 1.2vw + 0.8rem, 2.5rem);
  --p-size: clamp(1rem, 0.5vw + 0.8rem, 1.3rem);
  --p-color: #9e9e9e;
  --h3-color: #ffffff;

  /* Images */
  --img-bottom: 20vh;
  --img-right: clamp(30px, 6vw, 100px);
  --img-width: clamp(100px, 10vw, 180px);
  --img-scale: 2.8;

  /* Glow */
  --glow-size: 170%;
  --color1-size: 3%;
  --color2-size: 40%;
}

@media (min-width: 1600px) {
  :root {
    --padding-x: 12vw;
    --tile-min-height: clamp(250px, 41vw, 900px); 
    --tile-small-height: clamp(180px, 15vw, 400px);
  }
}

.hero-tiles.custom-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: var(--padding-y) var(--padding-x);
  justify-content: center;   /* Align grid inside centered container */
  align-items: stretch;
  pointer-events: auto;
  user-select: none;
}

.hero-headline {
  grid-column: 1 / -1;
  color: white;
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 10rem);
  margin-top: 3rem;
  margin-bottom: 1.9rem;
  text-align: center;
  padding: 0 var(--padding-x);
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.hero-headline .selectable-text {
  user-select: text;
  pointer-events: auto;
}

/* Right column */
.tile-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
}

/* Tile Sizes */
.tile-large {
  min-height: var(--tile-min-height);
  --img-bottom: 30vh;
  --img-right: 7vw;
  --img-width: 14vw;
  --img-scale: 2.5;
}

.tile-small {
  flex: 1;
  min-height: var(--tile-small-height);
  --img-bottom: 15vh;
  --img-right: 15vw;
  --img-width: 7vw;
  --img-scale: 3.5;
}

/* Tile Base Style */
.tile {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0);
  padding: var(--tile-padding);
  border-radius: var(--tile-radius);
  backdrop-filter: blur(var(--tile-blur));
  transition: transform 0.4s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  box-shadow: var(--tile-shadow);
}

/* Image styling */
.tile img.normal-img,
.tile img.hover-img {
  position: absolute;
  bottom: var(--img-bottom);
  right: var(--img-right);
  width: var(--img-width);
  height: auto;
  pointer-events: none;
  transition: opacity 3s ease, filter 3s ease, transform 3s ease;
  transform: scale(var(--img-scale));
  z-index: 1;
  filter: drop-shadow(0 0 0 transparent);
}

.tile img.normal-img {
  opacity: 1;
}

.tile img.hover-img {
  opacity: 0;
}

.tile:hover img.normal-img {
  opacity: 0;
}

.tile:hover img.hover-img {
  opacity: 1;
}

/* Glow */
.tile::before {
  content: '';
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  transform: translate(-50%, -50%);
  width: clamp(200px, var(--glow-size, 600px), 1000px);
  height: clamp(200px, var(--glow-size, 600px), 1000px);
  background:
    radial-gradient(circle at center, #45b7da54 0%, transparent var(--color1-size)),
    radial-gradient(circle at center, #45b7dadc 0%, transparent var(--color2-size));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
  z-index: 2;
}

.tile:hover::before {
  opacity: 1;
}

/* Tile Text */
.tile-content {
  position: relative;
  z-index: 3;
}

.tile h3 {
  margin-bottom: 0.3rem;
  color: var(--h3-color);
  text-align: left;
  position: relative;
  z-index: 10;
  transition: none;
}

.tile h3::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #ffffff, #0b394938, #0b3a4981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 11;
}

.tile:hover h3::before {
  opacity: 1;
}

.tile-large h3 {
  font-size: var(--h3-size-large);
}

.tile-small h3 {
  font-size: var(--h3-size-small);
}
.tile p {
  color: var(--p-color);
  font-size: var(--p-size);
  margin-top: 0.3rem;
  max-width: 90%;
  line-height: 1.5;
  text-align: left;
}

.tile:hover {
  transform: scale(1.02);
  background: rgba(51, 145, 173, 0.1); /* subtle blue background */
  box-shadow: inset 0 0 0 1.5px #3391ad99; /* updated shadow with stronger color */
}

.tile {
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}