/* Clean Express homepage: restrained type hierarchy and neutral default artwork.
   The slider, catalog, booking links, and Website Setting content remain data driven. */

main > section:first-child .space-y-3 > p:nth-of-type(1) {
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.25;
}

main > section:first-child .space-y-3 > p:nth-of-type(1) span {
    font-weight: 800;
}

html[dir="rtl"] main .italic {
    font-style: normal;
}

main > section:nth-of-type(3) .btn_outline,
main > section:nth-of-type(6) .btn_outline {
    border-color: rgba(255, 255, 255, .65);
}

main > section:nth-of-type(3) .btn_outline p,
main > section:nth-of-type(6) .btn_outline p {
    color: #fff;
}

main > section:first-child .space-y-3 > p:nth-of-type(2) {
    font-size: clamp(1rem, 1.55vw, 1.25rem);
    line-height: 1.8;
    color: #526878;
}

main > section:nth-of-type(2) .heading_section > p:first-child {
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    font-weight: 700;
    line-height: 1.35;
}

main > section:nth-of-type(2) .heading_section > p:nth-child(2) {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.75;
    color: #526878;
}

main > section:nth-of-type(2) .icon_labels + div p:first-child {
    font-weight: 700;
}

main > section:nth-of-type(2) .icon_labels + div p:nth-child(2) {
    color: #526878;
    line-height: 1.7;
}

main > section:nth-of-type(3) header > p:first-child,
#how-it-works > div:first-child > div:first-child > div,
main > section:nth-of-type(5) h2,
main > section:nth-of-type(6) p.text-white,
main > section:nth-of-type(9) p.text-white {
    font-weight: 700;
}

#how-it-works > div:first-child > div:first-child > div {
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.4;
}

#how-it-works .space-y-4 > div > div > p:first-child {
    font-weight: 700;
}

#how-it-works .space-y-4 > div > div > p:last-child {
    color: #526878;
    line-height: 1.7;
}

/* The stock photos are fallback assets only. An image uploaded later through
   Website Setting has a storage URL and displays normally. */
#how-it-works > div:last-child:has(> img[src$="/website/assets/images/how-it-works/bg.png"]) {
    position: relative;
    min-height: 410px;
    border-radius: 1.5rem;
    overflow: hidden;
    background: radial-gradient(circle at 75% 24%, #c8ebf5 0 9%, transparent 9.3%),
                radial-gradient(circle at 24% 78%, #d9f0f6 0 15%, transparent 15.3%),
                linear-gradient(135deg, #e8f5f9, #b9e0ec);
}

#how-it-works > div:last-child:has(> img[src$="/website/assets/images/how-it-works/bg.png"]) > img,
main > section:nth-of-type(6) > div:first-child > img[src$="/website/assets/images/perfection/bg2.png"] {
    display: none;
}

#how-it-works > div:last-child:has(> img[src$="/website/assets/images/how-it-works/bg.png"])::before {
    content: "";
    position: absolute;
    inset: 18% 22%;
    border: 18px solid rgba(11, 109, 151, .23);
    border-radius: 36px;
    transform: rotate(-10deg);
}

#how-it-works > div:last-child:has(> img[src$="/website/assets/images/how-it-works/bg.png"])::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    top: 17%;
    right: 16%;
    border: 18px solid rgba(11, 109, 151, .3);
    border-radius: 50%;
}

main > section:nth-of-type(6) > div:first-child:has(> img[src$="/website/assets/images/perfection/bg2.png"]) {
    min-height: 300px;
    border-radius: 2rem;
    background: radial-gradient(circle at 45% 45%, rgba(113, 206, 232, .38) 0 14%, transparent 14.3%),
                radial-gradient(circle at 64% 62%, rgba(113, 206, 232, .2) 0 24%, transparent 24.3%);
}

@media (max-width: 767px) {
    #how-it-works > div:last-child:has(> img[src$="/website/assets/images/how-it-works/bg.png"]),
    main > section:nth-of-type(6) > div:first-child:has(> img[src$="/website/assets/images/perfection/bg2.png"]) {
        display: none;
    }
}

/* Layout refinements for the five current service cards. */
main > section:first-child img[src$="/website/assets/images/herosection/1.png"],
main > section:first-child img[src$="/website/assets/images/herosection/2.png"] { display: none !important; }

@media (min-width: 1024px) and (max-width: 1279px) {
    main > section:nth-of-type(2) > div.grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    main > section:nth-of-type(2) > div.grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
    main > section:nth-of-type(2) > div.grid:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1280px) {
    main > section:nth-of-type(2) > div.grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
main > section:nth-of-type(2) > div.grid > div { min-width: 0; }
main > section:nth-of-type(2) > div.grid > div .space-y-\[15px\] > p:first-child { font-size: 1.05rem; line-height: 1.6; font-weight: 700; }
main > section:nth-of-type(2) > div.grid > div .space-y-\[15px\] > p:nth-child(2) { font-size: .9rem; line-height: 1.7; color: #526878; }

/* Use the real step cards instead of the stock phone outline. */
@media (min-width: 768px) {
    #how-it-works:has(img[src$="/website/assets/images/how-it-works/bg.png"]) { grid-template-columns: minmax(0, 1fr); }
    #how-it-works:has(img[src$="/website/assets/images/how-it-works/bg.png"]) > div:last-child { display: none; }
    #how-it-works:has(img[src$="/website/assets/images/how-it-works/bg.png"]) .space-y-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    #how-it-works:has(img[src$="/website/assets/images/how-it-works/bg.png"]) .space-y-4 > div { margin: 0; }
}

footer .relative.z-0 > img { display: block; width: auto; max-width: min(100%, 300px); max-height: 110px; object-fit: contain; margin-inline: auto; filter: brightness(0) invert(1); opacity: .88; }

/* This app panel still shows an unrelated demo and inactive store links. */
main > section:nth-of-type(7):has(img[src$="/storage/take-with-us/t5HWdvkj5WTM22wMGkIZFmWcsWtBSS1LcF3bOv4o.png"]) { display: none; }