/*
Theme Name: Mohamed Fadel Agency
Description: A trilingual agency website with a quote form and project showcase.
Version: 1.1.16
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: mohamed-fadel-agency
*/
:root{--ink:#111319;--paper:#f6f3ed;--blue:#2549ff;--line:#d9d7d2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,"Segoe UI",Tahoma,sans-serif;line-height:1.65}a{color:inherit}img{display:block;max-width:100%}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #6b86ff;outline-offset:4px}.wrap{width:min(1280px,calc(100% - 56px));margin-inline:auto}.top,.hero,.foot{background:#0a0b11;color:white}.top{border-bottom:1px solid #292b36}.top .wrap,.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:14px}.brand img{width:150px;height:auto}.nav,.langs,.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.nav a,.langs a{text-decoration:none}.langs a[aria-current]{border-bottom:2px solid #7791ff}.langs{font-size:.85rem;gap:12px}.hero{min-height:min(680px,78vh);display:grid;align-items:center;background-position:center;background-size:cover;position:relative;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#090a11 1%,#090a11d9 28%,transparent 75%);z-index:-1}.hero .wrap{display:flex;justify-content:flex-end;direction:ltr;padding-block:76px}.hero-copy{width:min(100%,560px)}.hero-copy p{max-width:48ch;color:#e1e3ef}.tag{font-weight:750;letter-spacing:.07em;color:#9aafff}.hero h1{font-size:clamp(2.55rem,6vw,5.25rem);line-height:1.13;letter-spacing:-.045em;margin:.22em 0}.hero-copy[dir=rtl] h1{letter-spacing:0}.button{display:inline-block;padding:.76em 1.3em;border:0;border-radius:.35rem;background:var(--blue);color:white;text-decoration:none;font:inherit;font-weight:750;cursor:pointer}.button.alt{background:transparent;border:1px solid currentColor}.actions{margin-top:24px}section:not(.hero){padding-block:clamp(56px,8vw,112px)}h2{font-size:clamp(2rem,4vw,3.55rem);line-height:1.13;margin:0 0 30px}h3{line-height:1.3;margin:0}.about,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,82px);align-items:center}.about img{border-radius:.45rem;width:100%}.service-section{background:#eae8e2}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:var(--paper);border:1px solid var(--line);border-radius:.45rem;overflow:hidden}.card img{width:100%;aspect-ratio:2.25;object-fit:cover}.card-inner{padding:24px}.card h3{font-size:1.45rem}.card details{margin-top:16px}.card summary{cursor:pointer;color:#1934bb;font-weight:700}.card dl{margin-bottom:0}.card dt{font-weight:750;margin-top:14px}.card dd{margin:3px 0 0}.contact{background:#10131e;color:white}.contact a{overflow-wrap:anywhere}.contact-grid{align-items:start}.fields{display:grid;gap:13px}.fields label{display:grid;gap:4px}.fields input,.fields select,.fields textarea{width:100%;padding:.7em;border-radius:.25rem;border:1px solid #828799;background:#fff;color:#111;font:inherit}.fields textarea{min-height:125px;resize:vertical}.fields button{justify-self:start}.notice{padding:14px;background:#243356;border-radius:.3rem}.honey{position:absolute;inset-inline-start:-9999px}.foot{border-top:1px solid #292b36}.project img{height:auto}.project p{margin:.5rem 0}.skip{position:absolute;inset-inline-start:15px;top:-100px;z-index:9}.skip:focus{top:10px}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.about,.contact-grid{grid-template-columns:1fr}.hero:before{background:linear-gradient(270deg,#090a11ed,#090a1170)}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.cards{grid-template-columns:1fr}.top .wrap{gap:12px}.nav{order:3;width:100%;gap:12px;font-size:.9rem}.brand img{width:115px}.hero .wrap{padding-block:60px}.hero{min-height:520px}.hero:before{background:#090a11b3}.card-inner{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.25rem,5.2vw,4.65rem)}
.hero-copy .hero-tagline{font-size:clamp(1.1rem,2.2vw,1.55rem);font-weight:750;color:#aebeff}
.hero:before{z-index:0}
.hero-reel{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease}
.hero-reel img.is-visible{opacity:1}
.service-card img{aspect-ratio:16/10}
.about-visual{margin:0;position:relative}
.about .about-photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.about .about-logo{position:absolute;top:5%;left:5%;width:35%;height:auto;padding:8px;background:#0a0b11e6}
.service-card,.service-card .card-inner{display:flex;flex-direction:column}
.service-card .card-inner{flex:1}
.service-card .button{align-self:flex-start;margin-top:auto}
.company-contact{font-style:normal;margin-block:24px}
.client-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding:0;margin:0;list-style:none}
.client-gallery li{display:grid;place-items:center;min-height:146px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:.45rem}
.client-gallery img{width:100%;height:112px;object-fit:contain}
@media(prefers-reduced-motion:reduce){.hero-reel img{transition:none}}

main > section { box-shadow: inset 0 0 0 3px transparent; }
main > section:target, main > section:focus-within { box-shadow: inset 0 0 0 3px #6788ff; }
@media (hover: hover) {
    main > section:hover { box-shadow: inset 0 0 0 3px #6788ff; }
}


#about {
    background: #141f35;
    color: #f7f8ff;
}
#about p { color: #dbe3f5; }
#about h3 { color: #a9bbff; }
.service-section {
    background: #202637;
    color: #f7f8ff;
}
.service-section .card {
    background: #2a3247;
    color: #f7f8ff;
    border-color: #47536e;
}
.service-section .card p { color: #dbe3f5; }
#clients {
    background: #192235;
    color: #f7f8ff;
}

.top .nav a:hover,
.top .nav a:focus-visible,
.top .langs a:hover,
.top .langs a:focus-visible {
    color: #a9bbff;
    text-decoration: underline;
    text-underline-offset: .35em;
}

@media (prefers-reduced-motion: no-preference) {
    .mfa-intro {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        background: #0a0b11;
        pointer-events: none;
        animation: mfa-intro-out 400ms 800ms both;
    }
    .mfa-intro img { width: min(280px, 64vw); height: auto; animation: mfa-rise 650ms both; }
    .mfa-hero-enter h1 { animation: mfa-type 850ms 850ms both; }
    .mfa-hero-enter[dir="rtl"] h1 { animation-name: mfa-type-rtl; }
    .mfa-hero-enter .hero-tagline { animation: mfa-rise 500ms 1250ms both; }
    .mfa-hero-enter p:not(.hero-tagline),
    .mfa-hero-enter .actions { animation: mfa-rise 500ms 1400ms both; }
    .mfa-reveal { opacity: 0; transform: translateY(20px); }
    .mfa-reveal.mfa-revealed,
    .mfa-reveal:focus-within { opacity: 1; transform: none; transition: opacity 550ms ease, transform 550ms ease; }
    .service-card.mfa-revealed:nth-child(3n+2) { transition-delay: 75ms; }
    .service-card.mfa-revealed:nth-child(3n) { transition-delay: 150ms; }
    @keyframes mfa-intro-out { to { opacity: 0; visibility: hidden; } }
    @keyframes mfa-rise { from { opacity: 0; transform: translateY(12px); } }
    @keyframes mfa-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
    @keyframes mfa-type-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
}

body { font-family: Manrope, system-ui, "Segoe UI", sans-serif; }
html:lang(ar) body { font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; }
.hero h1, h2 { font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
    .mfa-intro {
        isolation: isolate;
        overflow: hidden;
        background: radial-gradient(ellipse at center, #101d3b 0%, #080b15 52%, #040509 85%);
        animation: mfa-intro-out 500ms 1750ms both;
    }
    .mfa-intro::before {
        content: "";
        position: absolute;
        inset: -30%;
        z-index: -1;
        background: linear-gradient(112deg, transparent 44%, #366dff60 49%, #b9d6ff99 50%, #366dff55 51%, transparent 56%);
        animation: mfa-logo-beam 1450ms 120ms both;
    }
    .mfa-intro img {
        width: min(420px, 72vw);
        animation: mfa-logo-reveal 1350ms 100ms both;
    }
    .mfa-hero-enter h1 { animation-delay: 1850ms; }
    .mfa-hero-enter .hero-tagline { animation-delay: 2250ms; }
    .mfa-hero-enter p:not(.hero-tagline),
    .mfa-hero-enter .actions { animation-delay: 2400ms; }
    @keyframes mfa-logo-beam {
        0% { opacity: 0; transform: translateX(-55%); }
        28%, 68% { opacity: .8; }
        100% { opacity: 0; transform: translateX(55%); }
    }
    @keyframes mfa-logo-reveal {
        0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(.94); }
        65% { opacity: 1; clip-path: inset(0); filter: drop-shadow(0 0 18px #719eff); }
        100% { opacity: 1; clip-path: inset(0); transform: scale(1); filter: drop-shadow(0 0 5px #719eff66); }
    }
}


body { --mfa-toolbar-height: 0px; }
body.admin-bar { --mfa-toolbar-height: 32px; }
.top { position: sticky; top: var(--mfa-toolbar-height); z-index: 20; }
main[id], main > section[id] {
    scroll-margin-top: calc(var(--mfa-header-height, 100px) + var(--mfa-toolbar-height) + 12px);
}
.hero-reel img { transition-duration: 1150ms; }
@media (max-width: 782px) {
    body.admin-bar { --mfa-toolbar-height: 46px; }
}
@media (max-width: 600px) {
    body.admin-bar { --mfa-toolbar-height: 0px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-reel img { transition-duration: 0ms; }
}




.client-logo { display: grid; place-items: center; width: 100%; }
.client-gallery li { position: relative; }
.client-gallery li:focus-within { z-index: 2; }
.client-logo:focus-visible img {
    transform: scale(1.25);
    background: #fff;
    border-radius: .35rem;
    box-shadow: 0 8px 24px #0005;
}
@media (hover: hover) {
    .client-gallery li:hover { z-index: 2; }
    .client-logo:hover img {
        transform: scale(1.25);
        background: #fff;
        border-radius: .35rem;
        box-shadow: 0 8px 24px #0005;
    }
}

.client-viewer {
    position: fixed;
    direction: ltr;
    width: min(92vw, 820px);
    max-height: 90vh;
    border: 0;
    border-radius: 12px;
    background: #141f35;
    color: white;
    padding: 54px 12px 12px;
}
.client-viewer[open] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
.client-viewer::backdrop { background: #050810d9; }
.client-viewer img {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: min(60vh, 480px);
    object-fit: contain;
    background: white;
    border-radius: 6px;
}
.client-viewer button {
    color: white;
    background: #2a3247;
    border: 1px solid #697794;
    border-radius: 6px;
    width: 38px;
    height: 42px;
    font-size: 25px;
    cursor: pointer;
}
.client-viewer [data-prev] { grid-column: 1; grid-row: 1; }
.client-viewer [data-next] { grid-column: 3; grid-row: 1; }
.client-viewer [data-close] { position: absolute; top: 6px; right: 12px; }