.discover-page {
    background: linear-gradient(135deg, #fffdfb 0%, #f7e7df 100%);
    overflow: hidden;
}

.discover-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(310px, 35vw, 430px);
    display: grid;
    place-items: center;
    padding: clamp(45px, 6vw, 82px) clamp(24px, 10vw, 155px);
    overflow: hidden;
    background: linear-gradient(118deg, #321522 0%, #5d1933 66%, #7d2a47 100%);
    color: #fff;
    text-align: center;
}

/* The photographs are a separate stacking layer: background (0), images (1–2),
   contrast veil (3), content (4), and decoration (5). */
.discover-hero-art {
    position: absolute;
    z-index: 1;
    inset: 13px clamp(18px, 5vw, 78px);
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.discover-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(245, 199, 186, .48);
    box-shadow: 0 24px 58px rgba(23, 7, 18, .47);
}

.discover-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
}

.discover-photo.primary {
    z-index: 2;
    border-radius: 52% 14% 48% 18% / 21% 46% 24% 52%;
    animation: discover-primary 12s ease-in-out infinite;
}

.discover-photo.secondary {
    z-index: 1;
    border-radius: 15% 49% 19% 52% / 48% 18% 51% 22%;
    animation: discover-secondary 12s ease-in-out infinite;
}

.discover-hero::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(50, 21, 34, .44) 0%, rgba(50, 21, 34, .14) 48%, rgba(70, 22, 43, .36) 100%);
}

.discover-hero-copy {
    position: relative;
    z-index: 4;
    max-width: 680px;
    margin: auto;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    clip-path: none !important;
}

.discover-hero h1,
.discover-hero h1 em,
.discover-hero-copy :is(h1, p, .eyebrow) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    clip-path: none !important;
    text-decoration: none !important;
}

.discover-hero .eyebrow {
    margin-bottom: 12px;
    color: #f5bdb0;
}

.discover-hero h1 {
    font-size: clamp(2.9rem, 6vw, 6.2rem);
    line-height: .88;
    letter-spacing: -.065em;
    text-shadow: 0 2px 18px rgba(29, 7, 17, .45);
}

.discover-hero h1 em { color: #f4b7aa; }

.discover-hero-copy > p:last-child {
    max-width: 480px;
    margin: 16px auto 0;
    color: #f9e9e4;
    font-size: .93rem;
    line-height: 1.7;
    text-shadow: 0 2px 13px rgba(29, 7, 17, .44);
}

.discover-hero::after {
    content: '';
    position: absolute;
    z-index: 5;
    width: 54vw;
    height: 54vw;
    right: -27vw;
    bottom: -45vw;
    border: 1px solid rgba(245, 190, 177, .46);
    border-radius: 48% 52% 39% 61%;
    transform: rotate(-22deg);
    pointer-events: none;
}

.discover-spark {
    position: absolute;
    z-index: 6;
    right: clamp(18px, 6vw, 94px);
    bottom: 24px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(245, 194, 181, .66);
    border-radius: 50% 50% 43% 57%;
    background: #711a38;
    color: #f8cabe;
    font: 1.05rem var(--serif);
    animation: discover-spark 5s ease-in-out infinite;
}

.about-hero .discover-photo.secondary img { object-position: center 40%; }
.about-page .discover-intro { padding-top: clamp(70px, 9vw, 120px); }

.discover-intro {
    max-width: 970px;
    margin: auto;
    padding-bottom: clamp(45px, 6vw, 85px);
    text-align: center;
}
.discover-intro > p:not(.eyebrow) { max-width: 640px; margin: 20px auto 0; color: #6e585f; font-size: 1.02rem; line-height: 1.85; }
.discover-intro h2 { font-size: clamp(2.7rem, 5vw, 5.2rem); }

.discover-principles, .about-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 0; background: transparent; }
.discover-principles article, .about-moments article { min-height: 250px; padding: clamp(23px, 3vw, 38px); border: 1px solid #ead4cc; border-radius: 33px 8px 33px 8px; background: #fffdfb; box-shadow: 0 17px 34px rgba(91, 27, 39, .06); transition: transform .35s ease, box-shadow .35s ease; }
.discover-principles article:nth-child(2), .about-moments article:nth-child(2) { border-radius: 8px 33px 8px 33px; background: #711a38; color: #fff; }
.discover-principles article:hover, .about-moments article:hover { transform: translateY(-9px); box-shadow: 0 24px 40px rgba(91, 27, 39, .13); }
.discover-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 48% 52% 40% 60%; color: #7b2544; font-size: 1.25rem; }
.discover-principles article:nth-child(2) .discover-icon, .about-moments article:nth-child(2) .discover-icon { color: #f7c4b8; }
.discover-principles h3, .about-moments h3 { margin: 24px 0 10px; font-size: clamp(1.75rem, 2.6vw, 2.45rem); }
.discover-principles p, .about-moments p { margin: 0; color: #765e66; font-size: .85rem; line-height: 1.75; }
.discover-principles article:nth-child(2) p, .about-moments article:nth-child(2) p { color: #f4ddd7; }
.discover-closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: clamp(58px, 9vw, 115px); background: #f1ddd4; border-radius: 54px 12px 54px 12px; }
.discover-closing h2 { font-size: clamp(2.5rem, 4.5vw, 4.7rem); }
.discover-closing .button { white-space: nowrap; }

@keyframes discover-primary { 0%, 43% { opacity: 1; transform: scale(1) rotate(-1deg); } 50%, 93% { opacity: 0; transform: scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(-1deg); } }
@keyframes discover-secondary { 0%, 43% { opacity: 0; transform: scale(1.06) rotate(2deg); } 50%, 93% { opacity: 1; transform: scale(1) rotate(-1deg); } 100% { opacity: 0; transform: scale(1.06) rotate(2deg); } }
@keyframes discover-spark { 50% { transform: rotate(110deg) scale(1.13); } }

@media (max-width: 760px) {
    .discover-hero { min-height: 265px; padding: 44px 25px 38px; }
    .discover-hero-art { inset: 10px 12px; }
    .discover-hero::before { background: linear-gradient(90deg, rgba(50, 21, 34, .48), rgba(80, 27, 53, .28)); }
    .discover-hero h1 { font-size: clamp(2.65rem, 11vw, 4.2rem); }
    .discover-hero-copy { max-width: 330px; }
    .discover-hero-copy > p:last-child { max-width: 280px; font-size: .8rem; }
    .discover-spark { right: 19px; bottom: 17px; width: 35px; height: 35px; }
    .discover-intro { padding-top: 64px; text-align: left; }
    .discover-intro > p:not(.eyebrow) { margin-left: 0; }
    .discover-principles, .about-moments { grid-template-columns: 1fr; padding: 0 24px 70px; }
    .discover-principles article, .about-moments article { min-height: 0; padding: 27px; }
    .discover-closing { display: grid; margin: 0 24px; padding: 42px 27px; }
    .discover-closing .button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { .discover-photo, .discover-spark { animation: none; } .discover-photo.secondary { display: none; } }

/* Full-bleed Discover hero: photography fills the entire panel beneath the copy. */
.discover-hero {
    background: #4b1930;
}

.discover-hero-art {
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
}

.discover-photo,
.discover-photo.primary,
.discover-photo.secondary {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.discover-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none;
}

.discover-hero::before {
    z-index: 3;
    background: linear-gradient(105deg, rgba(55, 12, 29, .82) 0%, rgba(104, 23, 51, .70) 50%, rgba(62, 12, 32, .77) 100%);
}

.discover-hero::after,
.discover-spark {
    display: none;
}

.discover-hero-copy {
    z-index: 4;
}

@media (max-width: 760px) {
    .discover-hero-art { inset: 0; }
    .discover-hero::before { background: linear-gradient(112deg, rgba(55, 12, 29, .86), rgba(104, 23, 51, .73)); }
}