/* ==========================================================================
   Al Masa -- service landing page
   Rhythm: one spacing scale for the whole page.
     section padding   clamp(4rem, 9vw, 7rem)   (tight variant 3rem - 4.5rem)
     heading block     clamp(2.5rem, 5vw, 4rem) below it
     grids and cards   1.5rem gap (2rem on wide screens)
   Sections alternate cream / band / navy so the eye can tell where each one starts.
   Light and dark both read from the tokens below.
   ========================================================================== */
.svc {
    --svc-bg: #F8F2E6; --svc-band: #F1E8D3; --svc-card: #FFFDF8; --svc-text: #1F2937; --svc-muted: #475569;
    --svc-line: rgba(183, 142, 59, 0.32); --svc-gap: 1.5rem;
    background-color: var(--svc-bg) !important;
}
html.dark .svc {
    --svc-bg: #060A2B; --svc-band: #0A1040; --svc-card: #0F1857; --svc-text: #F8F2E6; --svc-muted: rgba(248, 242, 230, 0.8);
    --svc-line: rgba(217, 178, 90, 0.3);
}
@media (min-width: 1100px) { .svc { --svc-gap: 2rem; } }

.svc-container { max-width: 80rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.svc-section { padding-block: clamp(4rem, 9vw, 7rem); }
.svc-section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.svc-section--band { background: var(--svc-band); border-block: 1px solid var(--svc-line); }
.svc-navy { color: var(--am-cream); border-block: 1px solid rgba(217, 178, 90, 0.6); }

.svc-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.svc-head h2 { margin: 0.6rem 0 0; }
.svc-head::after { content: ''; display: block; width: 3.5rem; height: 3px; margin: 1.3rem auto 0; background: var(--am-gold); border-radius: 3px; }
.svc-head__sub { margin: 1rem 0 0; color: var(--svc-muted); }
.svc-kicker { display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--am-gold-deep); }
html.dark .svc-kicker { color: var(--am-gold-light); }
html[lang="ar"] .svc-kicker { letter-spacing: 0.02em; text-transform: none; font-size: 1rem; }

/* ---------- hero ---------- */
.svc-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(32rem, 78vh, 46rem); padding-block: clamp(3rem, 7vw, 5rem); color: var(--am-cream); border-bottom: 1px solid rgba(217, 178, 90, 0.7); overflow: hidden; }
.svc-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: svc-drift 24s ease-in-out infinite alternate; }
.svc-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(3, 17, 105, 0.94) 0%, rgba(11, 21, 86, 0.82) 45%, rgba(11, 21, 86, 0.35) 100%), linear-gradient(to top, rgba(6, 10, 43, 0.75), transparent 45%); }
html[dir="rtl"] .svc-hero__veil { background: linear-gradient(to left, rgba(3, 17, 105, 0.94) 0%, rgba(11, 21, 86, 0.82) 45%, rgba(11, 21, 86, 0.35) 100%), linear-gradient(to top, rgba(6, 10, 43, 0.75), transparent 45%); }
.svc-hero__inner { width: 100%; }
.svc-hero__crumbs { margin-bottom: 1.4rem; }
.svc-hero__crumbs ol { justify-content: flex-start; }
.svc-hero h1 { max-width: 16ch; margin: 0.8rem 0 1.2rem; color: #fff !important; font-size: clamp(2.6rem, 6.2vw, 4.8rem) !important; line-height: 1.05; }
html[lang="ar"] .svc-hero h1 { max-width: 14ch; line-height: 1.25; }
.svc-hero__lead { max-width: 38rem; margin: 0 0 2rem; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.8; color: rgba(248, 242, 230, 0.92) !important; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.svc-hero__facts { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.svc-hero__facts li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.8rem 1.4rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(217, 178, 90, 0.5); backdrop-filter: blur(6px); }
.svc-hero__facts strong { font-size: 2rem; line-height: 1; color: #F6DE9A; }
.svc-hero__facts span { font-size: 1rem; color: rgba(248, 242, 230, 0.9); }

/* ---------- summary ---------- */
.svc-summary { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) {
    .svc-summary { grid-template-columns: 1fr 1.05fr; }
    .svc-summary__text { position: sticky; top: 7rem; }
}
.svc-summary__text h2 { margin: 0.6rem 0 1.5rem; }
.svc-summary__cta { margin-top: 1.5rem; }
.svc-prose { font-size: 1.125rem; line-height: 1.95; color: var(--svc-muted); }
.svc-prose p { margin: 0 0 1.2rem; }
.svc-benefits__title { margin: 0 0 1.25rem !important; font-size: 1.15rem !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--am-gold-deep) !important; }
html.dark .svc-benefits__title { color: var(--am-gold-light) !important; }
html[lang="ar"] .svc-benefits__title { letter-spacing: 0; text-transform: none; font-size: 1.25rem !important; }
.svc-benefits__list { display: grid; gap: var(--svc-gap); }
.am-feature--row { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.3rem 1.4rem; }
.am-feature--row .am-feature__icon { flex: none; }

/* ---------- grids ---------- */
.svc-grid { display: grid; gap: var(--svc-gap); }
.svc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.svc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.svc-benefit { margin: 0; font-size: 1.125rem !important; font-weight: 600; line-height: 1.6; }

/* ---------- applications ---------- */
.svc-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--svc-gap); margin: 0; padding: 0; list-style: none; }
.svc-apps li { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.4rem; border-radius: 1.1rem; font-size: 1.125rem; font-weight: 600; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(217, 178, 90, 0.4); transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.svc-apps li:hover { background: rgba(217, 178, 90, 0.16); border-color: #F6DE9A; transform: translateY(-3px); }
.svc-apps__n { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; font-weight: 800; color: #0B1556; background: linear-gradient(145deg, #F6DE9A, #D9B25A); }

/* ---------- process ---------- */
.svc-steps { counter-reset: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--svc-gap); margin: 0; padding: 0; list-style: none; position: relative; }
.svc-steps li { position: relative; text-align: center; padding: 0 0.5rem; }
.svc-steps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.2rem; border-radius: 50%; font-size: 1.4rem; font-weight: 800; color: #F6DE9A; background: linear-gradient(145deg, #0B1556, #1b2a8f); border: 2px solid #D9B25A; box-shadow: 0 14px 26px -14px rgba(11, 21, 86, 0.8); }
.svc-steps h3 { margin: 0 !important; font-size: 1.2rem !important; }
/* the light moves from one circle to the next, like a traffic light in gold (script: almasa-fx.js) */
.svc-steps__n { transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s ease; }
.svc-steps li.is-lit .svc-steps__n {
    color: #0B1556; border-color: #FFF3C4; transform: scale(1.12);
    background: radial-gradient(circle at 35% 30%, #FFF6D1 0%, #F6DE9A 35%, #D9B25A 100%);
    box-shadow: 0 0 0 6px rgba(217, 178, 90, 0.22), 0 0 28px 8px rgba(232, 178, 70, 0.6), 0 14px 26px -14px rgba(11, 21, 86, 0.8);
}
.svc-steps h3 { transition: color 0.5s ease; }
.svc-steps li.is-lit h3 { color: var(--am-gold-deep) !important; }
html.dark .svc-steps li.is-lit h3 { color: #F6DE9A !important; }

@media (min-width: 900px) {
    .svc-steps li:not(:last-child)::after { content: ''; position: absolute; top: 2.25rem; inset-inline-start: calc(50% + 2.8rem); inset-inline-end: calc(-50% + 2.8rem); height: 2px; background: repeating-linear-gradient(90deg, #D9B25A 0 8px, transparent 8px 16px); }
}

/* ---------- locations ---------- */
.svc-place { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 1.1rem; background: var(--svc-card); border: 1px solid var(--svc-line); color: var(--svc-text); font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: transform 0.3s, border-color 0.3s, background 0.3s, color 0.3s; }
.svc-place strong { min-width: 3.2rem; padding: 0.35rem 0.6rem; text-align: center; border-radius: 0.7rem; font-size: 1.25rem; color: #0B1556; background: linear-gradient(145deg, #F6DE9A, #D9B25A); }
.svc-place span { flex: 1; }
.svc-place i { color: var(--am-gold); transition: transform 0.3s; }
.svc-place:hover { transform: translateY(-3px); border-color: var(--am-gold); }
.svc-place:hover i { transform: translateX(4px); }
html[dir="rtl"] .svc-place:hover i { transform: translateX(-4px); }
.svc-place:focus-visible, .svc-chips a:focus-visible, .svc-q summary:focus-visible { outline: 3px solid var(--am-gold); outline-offset: 3px; }

/* ---------- FAQ ---------- */
.svc-faq { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) { .svc-faq { grid-template-columns: 1fr 1.6fr; align-items: start; } .svc-faq__head { position: sticky; top: 6rem; } }
.svc-faq__head h2 { margin: 0.6rem 0 1rem; }
.svc-faq__head p { margin: 0 0 1.5rem; color: var(--svc-muted); }
.svc-faq__list { display: grid; gap: 1rem; }
.svc-q { border-radius: 1.1rem; background: var(--svc-card); border: 1px solid var(--svc-line); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.svc-q[open] { border-color: var(--am-gold); box-shadow: 0 18px 34px -24px rgba(122, 90, 26, 0.6); }
.svc-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; line-height: 1.5; color: var(--svc-text); }
.svc-q summary::-webkit-details-marker { display: none; }
.svc-q summary i { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.8rem; color: var(--am-gold); border: 1px solid var(--svc-line); transition: transform 0.3s, background 0.3s, color 0.3s; }
.svc-q[open] summary i { transform: rotate(180deg); background: var(--am-gold); color: #0B1556; }
.svc-q p { margin: 0; padding: 0 1.4rem 1.4rem; font-size: 1.0625rem; line-height: 1.85; color: var(--svc-muted); }

/* ---------- quote ---------- */
.svc-quote { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .svc-quote { grid-template-columns: 1fr 1fr; } }
.svc-quote__text h2 { margin: 0.7rem 0 1rem; font-size: clamp(2rem, 4vw, 3rem) !important; }
.svc-quote__text p { margin: 0 0 2rem; max-width: 30rem; font-size: 1.15rem; line-height: 1.8; color: rgba(248, 242, 230, 0.9) !important; }
.svc-quote__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.svc-quote__form { padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 1.4rem; background: #FFFDF8; color: #1F2937; border: 1px solid #D9B25A; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.7); }
.svc-quote__form h3 { margin: 0 0 1.2rem !important; color: #0B1556 !important; }
.svc-quote__form label { display: block; margin: 1rem 0 0.35rem; font-size: 0.9375rem; font-weight: 700; color: #0B1556; }
.svc-quote__form input, .svc-quote__form textarea { display: block; width: 100%; padding: 0.8rem 1rem; border-radius: 0.7rem; border: 1px solid rgba(11, 21, 86, 0.25); background: #fff; color: #1F2937; font-size: 1rem; }
.svc-quote__form input:focus, .svc-quote__form textarea:focus { outline: 3px solid rgba(183, 142, 59, 0.55); border-color: var(--am-gold); }
.svc-quote__form .am-btn { width: 100%; margin-top: 1.5rem; }
.svc-alert { padding: 0.8rem 1rem; border-radius: 0.7rem; background: #E8F7EE; color: #0B5D2C; font-weight: 600; }
html.dark .svc-quote__form { background: #FFFDF8; }
html.dark .svc-quote__form input, html.dark .svc-quote__form textarea { background: #fff !important; color: #1F2937 !important; border-color: rgba(11, 21, 86, 0.25) !important; }
html.dark .svc-quote__form label, html.dark .svc-quote__form h3 { color: #0B1556 !important; }
html.dark .svc-quote__form input::placeholder, html.dark .svc-quote__form textarea::placeholder { color: #64748B !important; }
html.dark .svc-quote__form .am-btn--navy { background: #0B1556 !important; color: #fff !important; border-color: #0B1556 !important; }

/* ---------- other formats ---------- */
.svc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.svc-chips a { display: inline-block; padding: 0.7rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--svc-text); background: var(--svc-card); border: 1px solid var(--svc-line); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; }
.svc-chips a:hover { background: var(--am-gold); color: #0B1556; border-color: var(--am-gold); transform: translateY(-2px); }

@keyframes svc-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce) {
    .svc-hero__img { animation: none; }
    .svc-steps__n, .svc-steps h3 { transition: none; }
    .svc-apps li, .svc-place, .svc-chips a { transition: none; }
}
@media (max-width: 640px) {
    .svc-hero { min-height: 30rem; }
    .svc-hero__actions .am-btn { flex: 1 1 100%; }
}