/* ==========================================================================
   Safe Pools - inner pages, archives and WooCommerce
   ========================================================================== */

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.sp-breadcrumb {
    background: var(--sp-bg);
    padding: 18px 0;
    font-size: 14px;
    color: var(--sp-muted-strong);
}

.sp-breadcrumb a {
    color: var(--sp-navy);
}

.sp-breadcrumb a:hover {
    color: var(--sp-blue);
}

/* ==========================================================================
   SERVICES ARCHIVE
   ========================================================================== */
.sp-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

/* ==========================================================================
   SERVICE - single
   ========================================================================== */
.sp-service-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.sp-service-single-icon {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-service-single-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.sp-service-single-title {
    font-size: var(--sp-h2);
    line-height: 1.4;
}

.sp-service-single-text {
    color: #4A4A4A;
    line-height: 2.1;
    text-align: justify;
}

.sp-service-single-media {
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
}

.sp-service-single-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   BOOKING FORM (Contact Form 7)
   ========================================================================== */
.sp-booking {
    margin-top: 70px;
    background: var(--sp-bg);
    border-radius: var(--sp-radius-lg);
    padding: 46px 40px;
}

/* The service booking form lives inside a full-width section.
   The white gap above the grey band stands in for the bottom padding the
   article cannot supply - the booking section sits inside the article, so the
   article's own padding falls below it, not between. Tying that gap to
   --sp-section-y makes the pair add up to the same rhythm every other section
   boundary uses (72 + 72 on desktop, 56 + 56 on a phone). It was a fixed 70px,
   which was right on desktop but ran 14px long once the scale stepped down. */
.sp-service-single .sp-booking-section {
    margin-top: var(--sp-section-y);
    padding: var(--sp-section-y) 0;
    background: var(--sp-bg);
}

.sp-service-single .sp-booking {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.sp-booking-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 34px;
}

/* The booking heading is centred as a shrink-to-fit element.  Its highlight
   should follow the text rather than spanning the whole booking panel. */
.sp-booking-title::before {
    inset-inline-start: 20px;
    width: calc(100% - 40px);
}

.sp-booking-form,
.sp-contact-form-box {
    max-width: 100%;
}

/* The message box is authored with rows="10" in Contact Form 7, which is what
   actually sizes it - a min-height alone cannot pull it back down. An explicit
   height overrides the row count and brings the whole card, and the map that
   matches its height, to a more balanced proportion. */
.sp-contact-form-box .wpcf7-form textarea {
    height: 150px;
    min-height: 0;
}

/* generic CF7 styling, shared by the booking and contact forms */
.wpcf7-form p {
    margin-bottom: 0;
}

.wpcf7-form .sp-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.wpcf7-form label {
    display: block;
    color: var(--sp-navy);
    font-size: 15px;
    margin-bottom: 8px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-white);
    color: var(--sp-text);
    font-family: var(--sp-font);
    font-size: 15px;
    margin-bottom: 18px;
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

/* The browser's own stylesheet forces direction:ltr on tel / email / number /
   date inputs, which parks the caret, the placeholder and the date segments on
   the left inside an otherwise right-to-left form. The value keeps its LTR
   direction - a phone number or an e-mail address reads left-to-right in any
   language - but the field is aligned to the reading edge like every other one. */
[dir="rtl"] .wpcf7-form input[type="email"],
[dir="rtl"] .wpcf7-form input[type="tel"],
[dir="rtl"] .wpcf7-form input[type="number"],
[dir="rtl"] .wpcf7-form input[type="date"] {
    text-align: right;
}

/* the native calendar button follows the text to the reading-start edge */
[dir="rtl"] .wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator {
    margin-inline: 0 auto;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 3px rgba(3, 124, 200, .12);
}

/* the pre-filled service name is not editable */
.wpcf7-form input[readonly] {
    background: #EFEFEF;
    color: var(--sp-navy);
    cursor: default;
}

.wpcf7-form textarea {
    min-height: 130px;
    resize: vertical;
}

.wpcf7-form .wpcf7-submit {
    background: var(--sp-blue);
    color: var(--sp-white);
    border: 0;
    border-radius: var(--sp-radius);
    padding: 13px 44px;
    font-family: var(--sp-font);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.wpcf7-form .wpcf7-submit:hover {
    background: var(--sp-blue-dark);
    transform: translateY(-2px);
}

.wpcf7 form .wpcf7-response-output {
    border-radius: var(--sp-radius);
    border-width: 1px;
    margin: 18px 0 0;
    padding: 12px 18px;
    font-size: 14px;
}

.wpcf7-not-valid-tip {
    color: #C0392B;
    font-size: 13px;
    margin: -12px 0 12px;
}

.wpcf7-spinner {
    margin-inline-start: 10px;
}

/* ==========================================================================
   PROJECT - single
   ========================================================================== */
.sp-project-single-media {
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
}

.sp-project-single-media img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

.sp-project-single-title {
    display: inline-block;
    margin-bottom: 24px;
}

.sp-project-single-text {
    color: #4A4A4A;
    line-height: 2.1;
    text-align: justify;
}

.sp-project-meta {
    margin-top: 26px;
    border-top: 1px solid var(--sp-line);
    padding-top: 20px;
}

.sp-project-meta li {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
}

.sp-project-meta-label {
    color: var(--sp-muted-strong);
    min-width: 130px;
}

.sp-project-meta-value {
    color: var(--sp-navy);
}

.sp-project-gallery {
    margin-top: 70px;
}

.sp-gallery-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 34px;
}

.sp-gallery-title::before {
    inset-inline-start: 20px;
    width: calc(100% - 40px);
}

.sp-gallery-item {
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.sp-gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform .5s ease;
}

.sp-gallery-item:hover img {
    transform: scale(1.06);
}

.sp-gallery-carousel .owl-nav button.owl-prev,
.sp-gallery-carousel .owl-nav button.owl-next {
    background: var(--sp-blue);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.sp-gallery-carousel .owl-nav button.owl-prev {
    inset-inline-start: -12px;
}

.sp-gallery-carousel .owl-nav button.owl-next {
    inset-inline-end: -12px;
}

/* ==========================================================================
   PROJECTS ARCHIVE - cards always show their caption
   ========================================================================== */
.sp-projects-archive .sp-projects-grid > [class*="col-"] {
    margin-bottom: 30px;
}

.sp-projects-archive .sp-project-link::after,
.sp-projects-archive .sp-project-body,
.sp-projects-archive .sp-project-arrow {
    opacity: 1;
}

.sp-projects-archive .sp-project-body {
    transform: translateY(0);
}

/* Archive cards are two columns on desktop and one column below lg.  A fluid
   height keeps the image proportion polished without the 509px carousel
   height making archive rows unnecessarily tall. */
.sp-projects-archive .sp-project-link {
    height: clamp(260px, 30vw, 390px);
}

/* ==========================================================================
   ABOUT - mission / vision cards
   ========================================================================== */
.sp-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

.sp-pillar {
    background: var(--sp-white);
    border-radius: var(--sp-radius-lg);
    padding: 40px 30px;
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: all var(--sp-transition);
}

.sp-pillar:hover {
    border-bottom-color: var(--sp-blue);
    box-shadow: var(--sp-shadow-hover);
    transform: translateY(-6px);
}

.sp-pillar-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--sp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sp-transition);
}

.sp-pillar:hover .sp-pillar-icon {
    background: var(--sp-blue);
}

.sp-pillar-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: filter var(--sp-transition);
}

.sp-pillar:hover .sp-pillar-icon img {
    filter: brightness(0) invert(1);
}

.sp-pillar-title {
    font-size: 21px;
    margin-bottom: 12px;
}

.sp-pillar-text {
    color: #5A5A5A;
    line-height: 2;
    font-size: 15px;
}

/* --- About page rhythm -----------------------------------------------------
   The intro block and the cards below it read as one unit, so the gap between
   them is tightened rather than left at two full section paddings.

   The pillars block is what the why-us photo rises into on this page - the
   same job the services section does on the home page - so it carries the same
   149px of bottom clearance. It has to be padding: the grey must continue
   behind the photo, and a margin would leave a white band instead. */
.page-template-page-about .sp-about {
    padding-bottom: 50px;
}

.page-template-page-about .sp-pillars {
    padding-top: 60px;
    padding-bottom: 149px;
}

/* The footer card carries no top padding of its own - the white gap above it is
   normally the bottom padding of the preceding section. This page ends on the
   navy why-us block, whose padding is navy, so that gap has to be put back here
   or the rounded card fuses into the band above it. */
.page-template-page-about .sp-footer {
    padding-top: var(--sp-section-y);
}

/* The photo keeps its -90px lift once the why section stacks, so the clearance
   stays above that figure - only the breathing room around it comes down. */
@media (max-width: 991px) {
    .page-template-page-about .sp-about {
        padding-bottom: 40px;
    }

    .page-template-page-about .sp-pillars {
        padding-top: 40px;
        padding-bottom: 110px;
    }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.sp-contact-box {
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 34px 30px;
    height: 100%;
}

.sp-contact-box-title {
    font-size: 21px;
    margin-bottom: 26px;
}

.sp-contact-top {
    margin-bottom: 30px;
}

.sp-contact-top > [class*="col-"] {
    margin-bottom: 24px;
}

.sp-contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sp-contact-social a {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all var(--sp-transition);
}

.sp-contact-social a:hover {
    background: var(--sp-blue);
    color: var(--sp-white);
    transform: translateY(-5px);
}

.sp-contact-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.sp-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sp-contact-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sp-highlight);
    color: var(--sp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sp-contact-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sp-contact-label {
    color: var(--sp-muted);
    font-size: 13px;
}

.sp-contact-meta a,
.sp-contact-meta span:not(.sp-contact-label) {
    color: var(--sp-navy);
    font-size: 15px;
}

.sp-contact-meta a:hover {
    color: var(--sp-blue);
}

.sp-contact-bottom > [class*="col-"] {
    margin-bottom: 24px;
}

/* The map fills its card edge to edge, with no inner gutter. Carrying both
   class names keeps that true below 575px, where .sp-contact-box restates its
   padding inside a media query and would otherwise win on source order - the
   map ended up framed by 26px of white on phones and flush everywhere else. */
.sp-contact-box.sp-contact-map-box {
    padding: 0;
    overflow: hidden;
    border: 0;
}

/* The map matches the height of the form beside it, so its floor only has to
   cover the case where it is on its own - the form is the taller of the two on
   every real viewport. It came down with the form when the subject field was
   dropped and the message box was shortened. */
.sp-contact-map,
.sp-contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.sp-pagination {
    margin-top: 50px;
    text-align: center;
}

.sp-pagination .wp-pagenavi,
.sp-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.sp-pagination a,
.sp-pagination span {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    background: var(--sp-white);
    color: var(--sp-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all var(--sp-transition);
}

.sp-pagination a:hover,
.sp-pagination .current {
    background: var(--sp-blue);
    border-color: var(--sp-blue);
    color: var(--sp-white);
}

.sp-empty {
    text-align: center;
    color: var(--sp-muted);
    padding: 40px 0;
}

/* ==========================================================================
   GENERIC ENTRY CONTENT
   ========================================================================== */
.sp-entry {
    color: #4A4A4A;
    line-height: 2.1;
}

.sp-entry h2,
.sp-entry h3,
.sp-entry h4 {
    margin: 28px 0 14px;
}

.sp-entry ul,
.sp-entry ol {
    padding-inline-start: 22px;
    margin-bottom: 18px;
}

.sp-entry ul li {
    list-style: disc;
    margin-bottom: 8px;
}

.sp-entry ol li {
    list-style: decimal;
    margin-bottom: 8px;
}

/* Bullets belong to prose the client typed into the editor. WooCommerce's own
   interface is rendered by a shortcode inside this same wrapper, so the cart,
   checkout and account screens were inheriting them too - the account menu
   came out as a bulleted list. Those lists go back to the site-wide reset. */
.sp-entry .woocommerce ul,
.sp-entry .woocommerce ol {
    padding-inline-start: 0;
}

.sp-entry .woocommerce ul li,
.sp-entry .woocommerce ol li {
    list-style: none;
    margin-bottom: 0;
}

.sp-entry img {
    border-radius: var(--sp-radius);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .sp-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .sp-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-service-single-media,
    .sp-project-single-media {
        margin-bottom: 30px;
    }

    .sp-service-single-media img,
    .sp-project-single-media img {
        height: 320px;
    }

    .sp-booking {
        padding: 34px 22px;
    }

    .sp-contact-list {
        grid-template-columns: 1fr;
    }

    .sp-contact-map,
    .sp-contact-map iframe {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    /* stays two-up on phones, matching the home carousel and the product grid */
    .sp-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* every row as tall as the tallest, so all the cards on the page match
       rather than each row settling at its own height */
    .sp-services-grid {
        grid-auto-rows: 1fr;
    }

    .sp-service-head {
        gap: 12px;
    }

    .sp-service-single-icon {
        width: 60px;
        height: 60px;
    }

    .sp-service-single-icon img {
        width: 30px;
        height: 30px;
    }

    .wpcf7-form .sp-form-row {
        grid-template-columns: 1fr;
    }

    .sp-contact-box {
        padding: 26px 18px;
    }
}

/* ==========================================================================
   RESPONSIVE REFINEMENTS
   A small final layer for consistent reading sizes and dependable layouts on
   phones and tablets.  This file is loaded after the component styles, so the
   rules deliberately live here rather than relying on selector order across
   separate stylesheets.
   ========================================================================== */
:root {
    --sp-h1: clamp(2.15rem, 4.2vw, 3.625rem);
    --sp-h2: clamp(1.6rem, 2.35vw, 1.875rem);
    --sp-h3: clamp(1.2rem, 1.8vw, 1.375rem);
    --sp-body: clamp(.9375rem, 1.15vw, 1rem);
    --sp-sub: clamp(.9375rem, 1.25vw, 1.0625rem);
    --sp-section-y: clamp(3.5rem, 6vw, 5rem);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

/* Avoid long Arabic/English labels, URLs and product names creating a
   horizontal scrollbar on narrow viewports. */
.sp-entry,
.sp-intro-text,
.sp-about-text,
.sp-service-single-text,
.sp-project-single-text,
.sp-footer-desc,
.sp-contact-meta,
.sp-product-title,
.sp-service-title {
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    .sp-header-inner {
        min-height: 76px;
    }

    .sp-header .container,
    .sp-intro-slide .container {
        max-width: none;
    }

    .sp-header-actions {
        gap: 12px;
    }

    /* The lifted desktop image otherwise leaves a 90px visual break after the
       layout becomes a vertical stack. */
    .sp-why-media {
        margin-top: 0;
    }

    .sp-why {
        min-height: 0;
    }

    /* The 149px on desktop is only the room the rising why-us photo occupies.
       Once that photo sits flush (above), the section is just carrying dead
       space, so it drops to a normal section gap. */
    .sp-services {
        padding-bottom: 70px;
    }

    .sp-footer-col--brand,
    .sp-footer-col--links,
    .sp-footer-col--account,
    .sp-footer-col--location {
        width: 50%;
    }

    .sp-footer-col--brand,
    .sp-footer-col--links,
    .sp-footer-col--account,
    .sp-footer-col--location {
        padding-top: 22px;
        padding-inline: 20px;
    }

    .sp-footer-col--brand {
        padding-inline-start: 0;
    }

    .sp-footer-map iframe {
        height: 210px;
    }

    .sp-project-body {
        inset-inline: 28px;
        bottom: 26px;
    }

    .sp-project-title {
        font-size: clamp(1.35rem, 3vw, 1.75rem);
    }
}

@media (max-width: 767px) {
    .container,
    .container-sm {
        padding-inline: 20px;
    }

    .sp-section-head {
        margin-bottom: 34px;
    }

    .sp-section-sub {
        margin-top: 7px;
        line-height: 1.75;
    }

    .sp-intro-slide {
        min-height: 520px;
        align-items: flex-end;
        padding: 88px 0 82px;
    }

    .sp-intro-overlay {
        background: linear-gradient(180deg, rgba(15, 59, 88, .18) 0%, rgba(15, 59, 88, .9) 100%);
    }

    [dir="ltr"] .sp-intro-overlay {
        background: linear-gradient(180deg, rgba(15, 59, 88, .18) 0%, rgba(15, 59, 88, .9) 100%);
    }

    .sp-intro-content {
        max-width: 100%;
    }

    .sp-intro-title {
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .sp-intro-text {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    /* Let the SVG overlap the next section by a couple of pixels. This avoids
       the thin seam that appears when the wave is scaled on narrow screens. */
    .sp-intro-wave {
        display: block;
        inset-inline-start: -1px;
        bottom: -2px;
        width: calc(100% + 2px);
        max-width: none;
    }

    .sp-intro .owl-nav {
        display: none;
    }

    .sp-intro-btn,
    .sp-about-more {
        padding-top: 16px;
    }

    .sp-about-text,
    .sp-service-single-text,
    .sp-project-single-text {
        text-align: start;
        line-height: 2;
    }

    .sp-about-media {
        margin-bottom: 28px;
    }

    .sp-why-media {
        height: 220px;
    }

    .sp-why-panel {
        padding: 42px 20px;
    }

    .sp-why .sp-section-head {
        margin-bottom: 28px;
    }

    .sp-why-card {
        height: auto;
        min-height: 154px;
        padding: 18px 10px;
    }

    .sp-why-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 12px;
    }

    .sp-counters {
        padding: 48px 0 22px;
    }

    .sp-counter {
        margin-bottom: 26px;
        padding-inline: 8px;
    }

    .sp-counter-value {
        font-size: clamp(2rem, 8vw, 2.65rem);
    }

    /* Hover-only content is not discoverable on touch screens. */
    /* height:100% rather than auto so a card fills the row it is in - the grid
       and the carousel both stretch their cells, but the card sat at its own
       content height inside that cell, so a two-line title made one card taller
       than the one beside it. */
    .sp-service-card {
        height: 100%;
        min-height: 286px;
        padding-bottom: 20px;
    }

    /* Owl floats its cells, which leaves them at their own heights. Laying the
       stage out as a flex row is what gives the cells a common height for the
       card above to fill. */
    .sp-services-carousel .owl-stage {
        display: flex;
        align-items: stretch;
    }

    .sp-services-carousel .owl-item {
        display: flex;
    }

    .sp-services-carousel .owl-item > * {
        width: 100%;
    }

    .sp-service-body {
        position: relative;
        top: auto;
        inset-inline: auto;
        margin-top: 18px;
    }

    .sp-service-card:hover .sp-service-body {
        top: auto;
    }

    .sp-service-btn {
        margin-top: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
        font-size: 1rem;
    }

    /* Two cards share the row here, so the photo comes down from the desktop
       171px to suit a ~160px-wide card. */
    .sp-service-media {
        height: 150px;
    }

    .sp-service-media img,
    .sp-service-card:hover .sp-service-media img {
        height: 100%;
    }

    /* The desktop hover choreography (photo shrinks, icon and title slide up to
       reveal the booking link) is switched off here - the link is already
       visible, so all the movement did was make the card lurch on tap. Every
       hover offset is pinned back to its resting value. */
    .sp-service-card:hover .sp-service-media {
        height: 150px;
    }

    /* The disc straddles the bottom edge of the photo: card padding 18 + photo
       150 - half the 76px disc. It was still sitting at the desktop 143px,
       which floated it up inside the image. */
    .sp-service-icon,
    .sp-service-card:hover .sp-service-icon {
        top: 130px;
        width: 76px;
        height: 76px;
    }

    .sp-service-icon img {
        width: 36px;
        height: 36px;
    }

    /* clears the half of the disc that hangs below the photo */
    .sp-service-body {
        margin-top: 48px;
    }

    .sp-products-grid {
        gap: 30px 16px;
    }

    /* Home products stay two to a row on phones, matching the shop grid, so the
       section reads as a grid rather than a long single-file list. */
    .sp-products .sp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 16px;
    }

    /* Two-up cards are too narrow for the wide 16:9 crop the full-width card
       used, so they share the square-ish ratio of the rest of the grid. */
    .sp-products .sp-product-media img {
        aspect-ratio: 1 / .82;
    }

    .sp-product-media img {
        height: auto;
        aspect-ratio: 1 / .82;
    }

    /* Cards are half-width here, so the title comes down a step to stop long
       Arabic product names running to three and four lines. */
    .sp-product-title,
    .sp-service-title {
        font-size: .875rem;
        line-height: 1.5;
    }

    .sp-product-price {
        font-size: .9375rem;
        margin-bottom: 9px;
    }

    .sp-project-link {
        height: 360px;
    }

    .sp-project-body {
        inset-inline: 24px;
        bottom: 24px;
    }

    .sp-project-arrow {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .sp-project-arrow img {
        width: 9px;
        height: 13px;
    }

    .sp-project-excerpt {
        font-size: .875rem;
    }

    .sp-booking {
        margin-top: 42px;
        padding: 28px 18px;
    }

    .sp-service-single-media img,
    .sp-project-single-media img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .sp-project-gallery {
        margin-top: 42px;
    }

    .sp-contact-map,
    .sp-contact-map iframe {
        min-height: 260px;
    }

    .sp-footer-card {
        border-radius: 18px;
    }

    .sp-footer-col--brand,
    .sp-footer-col--links,
    .sp-footer-col--account,
    .sp-footer-col--location {
        width: 100%;
        padding: 20px 0 0;
        margin-bottom: 24px;
    }

    .sp-footer-logo {
        margin-bottom: 24px;
    }

    .sp-footer-col--links,
    .sp-footer-col--account,
    .sp-footer-col--location {
        padding-top: 20px;
    }

    .sp-footer-title {
        margin-bottom: 22px;
    }

    .sp-footer-list li {
        margin-bottom: 14px;
    }

    .sp-footer-social {
        margin-top: 24px;
    }

    .sp-copyright {
        margin-top: 24px;
        padding-top: 22px;
        font-size: .8125rem;
        line-height: 1.8;
    }
}

@media (max-width: 420px) {
    .container,
    .container-sm {
        padding-inline: 16px;
    }

    .sp-header-actions {
        gap: 7px;
    }

    .sp-action,
    .sp-burger {
        width: 38px;
        height: 38px;
    }

    .sp-logo img {
        width: 150px;
    }

    .sp-intro-slide {
        min-height: 480px;
        padding-bottom: 64px;
    }

    /* the home grid is listed too - its own selector is more specific than the
       bare .sp-products-grid, so it would otherwise keep the wider gap */
    .sp-products-grid,
    .sp-products .sp-products-grid,
    .sp-why-grid {
        gap: 22px 12px;
    }

    .sp-product-media img {
        aspect-ratio: 1 / .9;
    }

    .sp-pagination a,
    .sp-pagination span {
        min-width: 38px;
        height: 38px;
        padding-inline: 10px;
    }
}

/* ==========================================================================
   POLICY PAGE - featured banner + reading card
   --------------------------------------------------------------------------
   Used by the "سياسة الاستخدام" page template. The banner reuses the navy /
   blue pairing the rest of the site is built on: the photo sits under a navy
   wash so white type stays readable whatever image the client uploads, and the
   title keeps the same highlight bar every section heading carries.
   ========================================================================== */
.sp-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    overflow: hidden;
}

.sp-page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sp-page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The wash is heavier at the bottom, where the title sits, and lifts towards
   the top so the photograph is still legible as a photograph. */
.sp-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 59, 88, .55) 0%, rgba(15, 59, 88, .88) 100%);
    z-index: 1;
}

.sp-page-hero > .container {
    position: relative;
    z-index: 2;
    padding-bottom: 46px;
    padding-top: 46px;
}

.sp-page-hero-title {
    position: relative;
    display: inline-block;
    color: var(--sp-white);
    font-size: var(--sp-h2);
    line-height: 1.4;
    margin: 0;
}

/* same highlight bar as .sp-section-title, in the navy-panel tone */
.sp-page-hero-title::before {
    content: '';
    position: absolute;
    inset-inline-start: -8px;
    bottom: 4px;
    width: calc(100% + 16px);
    height: 12px;
    background: rgba(107, 167, 207, .45);
    z-index: -1;
}

/* Capped and centred: across the full 1110px column a 16px line runs to about
   120 characters, roughly half as long again as comfortable prose. This keeps
   the measure near 80. */
.sp-terms-card {
    max-width: 920px;
    margin-inline: auto;
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 46px 44px;
    box-shadow: var(--sp-shadow);
}

.sp-terms-card > :first-child {
    margin-top: 0;
}

.sp-terms-card > :last-child {
    margin-bottom: 0;
}

.sp-terms-card h2 {
    font-size: var(--sp-h3);
    color: var(--sp-navy);
}

.sp-terms-card h3 {
    font-size: 18px;
    color: var(--sp-navy);
}

/* the rule under each heading echoes the divider used on the service meta */
.sp-terms-card h2 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sp-line);
}

@media (max-width: 991px) {
    .sp-page-hero {
        min-height: 240px;
    }

    .sp-page-hero > .container {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .sp-terms-card {
        padding: 32px 26px;
    }
}

@media (max-width: 575px) {
    .sp-page-hero {
        min-height: 190px;
    }

    .sp-terms-card {
        padding: 24px 18px;
    }
}

/* ==========================================================================
   HERO TYPE - smaller, and fluid
   --------------------------------------------------------------------------
   The hero was set at a fixed 56px / 18px with a couple of breakpoint
   overrides underneath. It read heavy on every screen, and the fixed sizes
   meant the jumps between breakpoints were abrupt. Both now scale with the
   viewport between a sensible floor and a ceiling, so there is one continuous
   curve instead of three steps - and the ceiling is well below where it was.
   Declared here because this file loads after sections.css, where the old
   fixed sizes and their breakpoint overrides live.
   ========================================================================== */
.sp-intro .sp-intro-title {
    font-size: clamp(1.65rem, 3.6vw, 2.6rem);
    line-height: 1.35;
    margin-bottom: 14px;
}

.sp-intro .sp-intro-text {
    font-size: clamp(0.9rem, 1.15vw, 1rem);
    line-height: 1.9;
    margin-bottom: 22px;
}

/* ==========================================================================
   FOOTER - the two link menus share a row
   --------------------------------------------------------------------------
   "Important links" and "My account" are both short lists. Once the footer
   stacks they each took a full-width row of their own, which left a lot of
   empty space beside them and pushed the map a long way down. They pair up
   instead, and only the brand block and the map keep a row to themselves.
   ========================================================================== */
@media (max-width: 991px) {
    .sp-footer-col--brand,
    .sp-footer-col--location {
        width: 100%;
    }

    .sp-footer-col--links,
    .sp-footer-col--account {
        width: 50%;
    }

    /* The 30px inset exists on desktop because every column edge carries a
       divider. Stacked, the columns start at the card edge instead, so the
       inset is just a shifted-in first character - it goes for all of them.
       Written with the same adjacent-sibling shape as the desktop rule so it
       actually outranks it, which a plain class selector would not. */
    .sp-footer-col + .sp-footer-col {
        padding-inline: 0;
    }

    .sp-footer-col--brand {
        padding-inline: 0;
    }

    /* the pair keeps a divider between the two of them, nothing else */
    .sp-footer-col + .sp-footer-col::before {
        display: none;
    }

    .sp-footer-col--links + .sp-footer-col--account {
        padding-inline-start: 20px;
    }

    .sp-footer-col--links + .sp-footer-col--account::before {
        display: block;
        height: auto;
        top: 0;
        bottom: 0;
    }

    /* the brand lockup centres over the full-width row it now occupies */
    .sp-footer-logo {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .sp-footer-col--links,
    .sp-footer-col--account,
    .sp-footer-col--location {
        padding-top: 0;
    }
}

/* ==========================================================================
   SIDE MENU - account block
   --------------------------------------------------------------------------
   The header's user icon and its dropdown have been retired; these are the
   same links, laid out for the side menu. On a phone the header was carrying
   three discs plus a burger, and this was the one that could move.
   ========================================================================== */
.sp-mobile-account {
    margin-top: 26px;
    padding-top: 22px;
}

.sp-mobile-account-title {
    color: var(--sp-navy);
    font-size: 16px;
    margin: 0;
}

.sp-mobile-account-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sp-navy);
    font-family: var(--sp-font);
    text-align: start;
    cursor: pointer;
}

.sp-mobile-account-toggle > i {
    color: var(--sp-blue);
    font-size: 13px;
    transition: transform var(--sp-transition);
}

.sp-mobile-account.is-open .sp-mobile-account-toggle > i {
    transform: rotate(180deg);
}

.sp-mobile-account-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sp-mobile-account-toggle .sp-mobile-account-head {
    margin-bottom: 0;
}

.sp-mobile-account-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sp-navy);
    color: var(--sp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    text-transform: uppercase;
}

.sp-mobile-account-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-mobile-account-name {
    color: var(--sp-navy);
    font-size: 15px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* an address always reads left-to-right, whatever the page direction */
.sp-mobile-account-mail {
    color: var(--sp-muted-strong);
    font-size: 12px;
    line-height: 1.4;
    direction: ltr;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-mobile-account-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--sp-transition), opacity var(--sp-transition), visibility var(--sp-transition);
}

.sp-mobile-account.is-open .sp-mobile-account-list {
    max-height: 420px;
    margin-top: 12px;
    opacity: 1;
    visibility: visible;
}

.sp-mobile-account-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    color: var(--sp-navy);
    font-size: 15px;
    transition: color var(--sp-transition);
}

.sp-mobile-account-list a:hover {
    color: var(--sp-blue);
}

.sp-mobile-account-list i {
    width: 18px;
    text-align: center;
    color: var(--sp-blue);
}

.sp-mobile-account-list .sp-mobile-account-out,
.sp-mobile-account-list .sp-mobile-account-out i {
    color: #C0392B;
}

/* The English drawer opens from the right, so its close control belongs to
   that same edge instead of appearing at the far side of the panel. */
[dir="ltr"] .sp-mobile-close {
    inset-inline-start: auto;
    inset-inline-end: 16px;
}

/* ==========================================================================
   TYPE SCALE - restored to the Figma source
   --------------------------------------------------------------------------
   Every size below is read off the 1600px design frame, which the theme
   renders at 1:1 (the same frame the 509px project card and the 30px section
   headings were measured from). This block supersedes the fluid clamp() sizes
   added while working on the responsive pass - those pulled the desktop scale
   down, which was never the intention.

   Sizes are declared once for desktop and stepped down at the breakpoints, so
   the desktop figure always matches the design exactly rather than being the
   top end of a curve.
   ========================================================================== */

/* --- hero (design y=337 / 425 / 559) ------------------------------------ */
.sp-intro .sp-intro-title {
    font-size: 56px;
    line-height: normal;
    font-weight: 900;
    margin-bottom: 18px;
}

.sp-intro .sp-intro-text {
    font-size: 29px;
    line-height: 45px;
    margin-bottom: 26px;
}

.sp-intro a.sp-intro-btn {
    font-size: 21px;
}

/* --- section headings (y=1581 / 1616) ----------------------------------- */
.sp-section-sub,
.sp-why .sp-section-sub {
    font-size: 18px;
    line-height: 44px;
}

/* --- about block (y=1004 / 1059 / 1375) --------------------------------- */
.sp-about .sp-section-title {
    font-size: 21px;
}

.sp-about-text {
    font-size: 15px;
}

.sp-about-more .sp-more {
    font-size: 21px;
}

/* --- counters (y=3086) --------------------------------------------------- */
.sp-counter-value,
.sp-counter-num,
.sp-counter-prefix {
    font-size: 56px;
}

/* --- project card (y=3853 / 3893) --------------------------------------- */
.sp-project-excerpt {
    font-size: 16px;
    line-height: 27px;
}

/* --- product card (y=4617 / 4654 / 4684) -------------------------------- */
.sp-product-price {
    font-size: 17px;
}

.sp-product-card .sp-product-btn {
    font-size: 21px;
}

/* --- footer column headings (y=5392) ------------------------------------ */
.sp-footer-title {
    font-size: 22px;
}

/* --- main navigation (y=26) ---------------------------------------------- */
.sp-nav-list > li > a {
    font-size: 15px;
}

/* ==========================================================================
   TYPE SCALE - stepping down
   --------------------------------------------------------------------------
   The design only describes the desktop frame. Below it the largest sizes come
   down in two steps; anything already small enough is left alone.
   ========================================================================== */
@media (max-width: 991px) {
    .sp-intro .sp-intro-title {
        font-size: 40px;
        line-height: 1.3;
    }

    .sp-intro .sp-intro-text {
        font-size: 20px;
        line-height: 1.8;
    }

    .sp-intro a.sp-intro-btn,
    .sp-about-more .sp-more,
    .sp-product-card .sp-product-btn {
        font-size: 17px;
    }

    .sp-section-sub,
    .sp-why .sp-section-sub {
        line-height: 1.9;
    }

    .sp-counter-value,
    .sp-counter-num,
    .sp-counter-prefix {
        font-size: 42px;
    }

    .sp-project-title {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .sp-intro .sp-intro-title {
        font-size: 30px;
    }

    .sp-intro .sp-intro-text {
        font-size: 17px;
    }

    .sp-section-sub,
    .sp-why .sp-section-sub {
        font-size: 16px;
    }

    .sp-counter-value,
    .sp-counter-num,
    .sp-counter-prefix {
        font-size: 34px;
    }

    .sp-project-title {
        font-size: 21px;
    }

    .sp-footer-title {
        font-size: 19px;
    }
}

/* ==========================================================================
   404 + SEARCH
   ========================================================================== */
.sp-notfound {
    text-align: center;
}

.sp-notfound-code {
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: var(--sp-highlight);
    margin-bottom: 8px;
}

.sp-notfound-title {
    font-size: var(--sp-h2);
    color: var(--sp-navy);
    margin-bottom: 14px;
}

.sp-notfound-text {
    color: #4A4A4A;
    line-height: 2.1;
    max-width: 620px;
    margin: 0 auto 30px;
}

.sp-notfound-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.sp-notfound-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    border-radius: var(--sp-radius);
    background: var(--sp-blue);
    color: var(--sp-white);
    border: 1px solid var(--sp-blue);
    font-size: 16px;
    transition: all var(--sp-transition);
}

.sp-notfound-btn:hover {
    background: var(--sp-blue-dark);
    border-color: var(--sp-blue-dark);
    color: var(--sp-white);
    transform: translateY(-2px);
}

.sp-notfound-btn--ghost {
    background: transparent;
    color: var(--sp-navy);
    border-color: var(--sp-line);
}

.sp-notfound-btn--ghost:hover {
    background: var(--sp-bg);
    border-color: var(--sp-navy);
    color: var(--sp-navy);
}

/* --- search --------------------------------------------------------------- */
.sp-search-term {
    color: var(--sp-navy);
}

.sp-search-form {
    max-width: 560px;
    margin: 0 auto 40px;
}

.sp-search-form input[type="search"],
.sp-search-form input[type="text"] {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    font-size: 15px;
    color: var(--sp-text);
}

.sp-search-form input:focus {
    outline: none;
    border-color: var(--sp-blue);
    box-shadow: 0 0 0 3px rgba(3, 124, 200, .12);
}

.sp-search-list {
    display: grid;
    gap: 20px;
}

.sp-search-item {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--sp-white);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius-lg);
    padding: 20px 22px;
    transition: box-shadow var(--sp-transition);
}

.sp-search-item:hover {
    box-shadow: var(--sp-shadow);
}

.sp-search-media {
    flex: 0 0 150px;
    border-radius: var(--sp-radius);
    overflow: hidden;
    background: var(--sp-bg);
}

.sp-search-media img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.sp-search-body {
    min-width: 0;
}

.sp-search-type {
    display: inline-block;
    font-size: var(--sp-small);
    color: var(--sp-blue-dark);
    background: rgba(3, 124, 200, .1);
    border-radius: 500px;
    padding: 4px 14px;
    margin-bottom: 10px;
}

.sp-search-title {
    font-size: var(--sp-h3);
    margin-bottom: 8px;
}

.sp-search-title a {
    color: var(--sp-navy);
}

.sp-search-title a:hover {
    color: var(--sp-blue);
}

.sp-search-excerpt {
    color: #4A4A4A;
    line-height: 2;
    margin-bottom: 10px;
}

@media (max-width: 575px) {
    .sp-search-item {
        flex-direction: column;
        gap: 14px;
    }

    .sp-search-media {
        flex: 0 0 auto;
        width: 100%;
    }
}