/* One shared glass surface keeps the four illustrated destinations connected. */
.home-pathways {
    position: relative;
    isolation: isolate;
    width: min(1440px, calc(100% - 48px));
    margin: 24px auto 12px;
    padding: 8px;
    border-radius: 30px;
    background: radial-gradient(ellipse at 25% 100%, #ddd9d0 0, transparent 54%), linear-gradient(115deg, #e9e8e4, #f6f5f1 48%, #e9eae7);
}
.home-pathways-glass {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    direction: ltr;
    border: 1px solid #fff;
    border-radius: 24px;
    background: linear-gradient(125deg, #ffffff9c, #ffffff58 55%, #ffffffad);
    box-shadow: inset 0 1px 0 #fff, 0 18px 35px -28px #343b31a6;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.home-pathway {
    position: relative;
    display: grid;
    grid-template-columns: 57% minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 190px;
    padding: 9px 17px 9px 6px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #243d49;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
}
.home-pathway + .home-pathway::before {
    content: "";
    position: absolute;
    left: 0;
    top: 27%;
    bottom: 27%;
    width: 1px;
    background: linear-gradient(transparent, #a5b0a65e, transparent);
}
.home-pathway-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: url('/images/home-pathways-atena-shakoor-v2.webp') no-repeat;
    background-size: 200% 200%;
    clip-path: inset(2%);
    transform-origin: 50% 75%;
    transition: transform .35s ease;
    pointer-events: none;
}
.home-pathway-art--designs { background-position: 0 0; }
.home-pathway-art--projects { background-position: 100% 0; }
.home-pathway-art--montage { background-position: 0 100%; }
.home-pathway-art--chat { background-position: 100% 100%; }
.home-pathway-copy { display: grid; justify-items: start; gap: 9px; direction: rtl; text-align: right; }
.home-pathway-copy strong { color: #233b48; font-size: 1rem; line-height: 1.7; }
.home-pathway-copy > span:not(.home-pathway-arrow) { color: #4a5c66; font-size: .73rem; line-height: 1.9; }
.home-pathway-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ffffffd9;
    border-radius: 50%;
    background: #ffffffb3;
    box-shadow: 0 3px 10px #34463808;
    color: #354e58;
    font: 25px/1 Arial, sans-serif;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.home-pathway-compare {
    position: absolute;
    top: 47%;
    left: 49%;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e9e4;
    border-radius: 50%;
    background: #fffffff0;
    color: #3b5360;
    box-shadow: 0 3px 9px #263b3b24;
    transform: translate(-50%, -50%);
    font: 16px/1 Arial, sans-serif;
}
.home-pathway:focus-visible { outline: 3px solid #087a39; outline-offset: 3px; background: #ffffff8c; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
    .home-pathway:hover { background: #ffffff6b; }
    .home-pathway:hover .home-pathway-art { transform: translateY(-6px) rotate(-2deg) scale(1.035); }
    .home-pathway:hover .home-pathway-arrow { background: #087a39; color: white; transform: translateX(3px); }
}
@media (max-width: 1100px) {
    .home-pathways { width: calc(100% - 32px); }
    .home-pathways-glass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-pathway { grid-template-columns: minmax(0, 1fr) minmax(125px, .8fr); padding-inline: 18px; }
    .home-pathway-art { max-width: 190px; justify-self: center; }
    .home-pathway:nth-child(3)::before { display: none; }
    .home-pathway:nth-child(n+3) { border-top: 1px solid #ffffffb3; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 600px) {
    .home-pathways { width: calc(100% - 24px); padding: 5px; margin-block: 16px; border-radius: 23px; }
    .home-pathways-glass { border-radius: 19px; }
    .home-pathway { grid-template-columns: 1fr; gap: 0; padding: 8px 10px 16px; min-height: 0; border-radius: 17px; }
    .home-pathway-art { width: min(100%, 165px); }
    .home-pathway-copy { justify-items: center; text-align: center; gap: 6px; }
    .home-pathway-copy strong { font-size: .92rem; }
    .home-pathway-copy > span:not(.home-pathway-arrow) { font-size: .71rem; }
    .home-pathway-arrow { width: 30px; height: 30px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-pathway, .home-pathway-art, .home-pathway-arrow { transition: none; }
    .home-pathway:hover .home-pathway-art, .home-pathway:hover .home-pathway-arrow { transform: none; }
}