/* ============================================
   SERVICES EMBLEM — static 3D logo at page foot
   Pure CSS 3D extrusion of logo-redoutline.png.
   15 stacked image layers along the Z axis give the
   logo real thickness. Locked at a static 3/4 angle
   so the extruded edge reads as a dimensional object.
   ============================================ */

.sv-coin-section {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 0 clamp(70px, 9vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3vw, 40px);
    /* Top starts at the exact same cream as the cards section above
       (.sv-grid-section is #F5F3EF) — that hard-matches the seam so no
       muddy fade band forms where the two sections meet. */
    background: linear-gradient(to bottom,
        #F5F3EF  0%,
        #F5F3EF 10%,
        #EFE9DD 50%,
        #F5F3EF 90%,
        #F5F3EF 100%);
    perspective: 1500px;
    overflow: hidden;
}

/* Soft warm glow behind the emblem */
.sv-coin-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(420px, 52vw, 760px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 26, 15, 0.16) 0%,
        rgba(255, 26, 15, 0.06) 35%,
        rgba(255, 26, 15, 0)    70%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

.sv-coin {
    position: relative;
    width: clamp(220px, 28vw, 380px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    z-index: 1;
}

.sv-coin__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* Faces the viewer head-on — no rotation. */
}

/* ---------- Extruded layers ----------
   Each face is a div with the logo as a background-image. Stacked along
   Z to give the assembly real depth. The image is fetched once and cached
   by the browser for every layer.

   backface-visibility: hidden so the front-facing layers disappear when
   the coin rotates past 90°. A separate stack (.sv-coin__face--reverse)
   is pre-rotated 180° and takes over for the back half of the spin so
   the logo reads correctly on both sides instead of appearing mirrored. */
.sv-coin__face {
    position: absolute;
    inset: 0;
    background-image: url("../images/logo-redoutline.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateZ(var(--z, 0px));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

/* Reverse-facing layers — visible when the coin's back is toward the
   camera. Pre-rotated 180° around Y so the logo appears un-mirrored. */
.sv-coin__face--reverse {
    transform: rotateY(180deg) translateZ(var(--z, 0px));
}

/* Outermost (front) face — slight brightness lift to read as the polished
   surface vs. the slightly darker side walls. */
.sv-coin__face--front {
    filter: brightness(1.06) contrast(1.06);
}

/* Outermost (back) face — same image, used as the rearmost layer. */
.sv-coin__face--back {
    filter: brightness(0.92);
}

/* Cast shadow on the floor below the emblem */
.sv-coin::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -6%;
    height: 8%;
    background: radial-gradient(ellipse at center,
        rgba(40, 20, 10, 0.40) 0%,
        rgba(40, 20, 10, 0.18) 40%,
        transparent 75%);
    filter: blur(10px);
    transform: translateZ(-30px);
    pointer-events: none;
}

/* ---------- Caption ---------- */
.sv-coin-caption {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
}