@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Readex+Pro:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

/* --- Header & Logo --- */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    background: rgba(17, 17, 15, 0.95);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.brand img {
    height: 70px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand img:hover {
    transform: scale(1.05);
}

/* --- WhatsApp Floating Bubble --- */
.floating-communication-bar {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}

.floating-greeting-toast {
    background: white;
    color: #333;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    position: relative;
    max-width: 280px;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toast-text strong {
    display: block;
    color: #25d366;
    font-size: 0.9rem;
}

.toast-text p {
    margin: 5px 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.toast-close {
    position: absolute;
    top: 5px;
    left: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #999;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #333;
}

.comm-bubble-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.comm-btn-whatsapp { background: #25d366; }
.comm-btn-phone { background: #c99b68; }
.comm-btn-scroll { background: #333; opacity: 0; pointer-events: none; }

.comm-bubble-btn:hover {
    transform: scale(1.1);
}

/* --- Cards & Modals --- */
.card-architectural {
    background: #1e1e1c;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.card-architectural:hover {
    background: #252522;
    transform: translateY(-5px);
    border-color: #c99b68;
}

.modal-notice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    padding: 20px;
}

.modal-notice-overlay.active {
    display: flex;
}

.modal-notice-content {
    background: #1e1e1c;
    max-width: 600px;
    width: 100%;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    border: 1px solid #c99b68;
}

.modal-close-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; }
.site-shell { overflow:hidden; background:var(--ink); }
.announcement { height:32px; display:flex; align-items:center; justify-content:center; gap:12px; background:#201f1c; color:#c9c2b7; font-size:11px; letter-spacing:.05em; position:relative; z-index:10000; }
.announcement button { position:absolute; left:22px; background:none; color:#948d83; display:grid; place-items:center; }
.marquee { display:flex; gap:20px; white-space:nowrap; animation:marquee 22s linear infinite; }
.marquee i { color:var(--copper); font-style:normal; }
@keyframes marquee { from{transform:translateX(10%)} to{transform:translateX(-10%)} }
.site-header { height:88px; padding:0 clamp(22px,5vw,80px); display:flex; align-items:center; justify-content:space-between; position:fixed; top:32px; right:0; left:0; z-index:9999; transition:background .25s var(--ease),backdrop-filter .25s var(--ease); }
.site-header.is-scrolled { background:rgba(17,17,15,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.brand img { width:124px; max-width:20vw; height:auto; display:block; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:clamp(18px,3vw,46px); font-size:13px; color:#b4afa6; }
.site-header nav a { transition:color .2s; } .site-header nav a:hover { color:var(--paper); }
.nav-phone { display:flex; align-items:center; gap:7px; color:var(--paper)!important; border-right:1px solid var(--line); padding-right:25px; }
.menu-button { display:none; background:none; }
.section-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,7vw,110px); }
.hero { min-height:850px; padding:180px clamp(22px,8vw,140px) 90px; align-items:center; background:radial-gradient(circle at 75% 45%,#282620 0,#11110f 42%); }
.hero-copy { max-width:590px; order:1; }
.hero-visual { order:2; position:relative; aspect-ratio:1/1.08; max-width:630px; }
.hero-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
.hero-visual:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,17,15,.4),transparent 45%),linear-gradient(0deg,rgba(17,17,15,.58),transparent 35%); pointer-events:none; }
.mini-label,.eyebrow { color:var(--copper); font-size:12px; letter-spacing:.08em; font-weight:500; display:block; } .mini-label span { color:#938c82; margin-right:15px; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:'Readex Pro',sans-serif; font-weight:500; letter-spacing:-.055em; }
h1 { font-size:clamp(43px,5.8vw,83px); line-height:1.18; margin:26px 0; } h1 em,h2 em { color:var(--copper); font-style:normal; }
.hero-copy>p { color:#aaa59d; font-size:17px; line-height:2; max-width:510px; margin-bottom:32px; }
.hero-actions { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.button { min-height:47px; padding:0 20px; display:inline-flex; align-items:center; gap:10px; transition:transform .18s var(--ease),background .18s,color .18s; font-size:13px; } .button:active { transform:scale(.97); }.button-copper { background:var(--copper); color:#171512; }.button-copper:hover { background:#e1b47d; }.button-ghost { border:1px solid var(--line); color:#ddd8d0; }.button-ghost:hover { border-color:var(--copper); color:var(--copper); }.button-outline { border:1px solid var(--copper); color:var(--copper); background:transparent; }
.hero-note { margin-top:60px; display:flex; align-items:center; gap:8px; color:#88837a; font-size:11px; }
.image-caption { position:absolute; bottom:22px; right:22px; z-index:2; background:rgba(17,17,15,.88); padding:16px 18px; min-width:220px; }.image-caption span { color:var(--copper); margin-left:15px; }.image-caption strong,.image-caption small { display:block; }.image-caption strong { font-size:13px; font-weight:500; }.image-caption small { color:#88837a; font-size:10px; margin-top:5px; }.watermark { position:absolute; top:25px; left:25px; z-index:2; color:rgba(255,255,255,.26); font-family:serif; font-size:34px; line-height:.8; }.watermark small { font:7px sans-serif; letter-spacing:.15em; }
.section { padding:clamp(90px,12vw,170px) clamp(22px,8vw,140px); }.dark-section { background:#181815; }.section-heading h2 { font-size:clamp(36px,4.6vw,65px); line-height:1.35; margin:17px 0 0; }.lead,.section-intro,.work-head>p { color:#a6a097; font-size:16px; line-height:2; }.lead { max-width:560px; margin-top:28px; }.intro-grid { align-items:end; }.process-list { display:flex; border-top:1px solid var(--line); }.process-list div { flex:1; padding-top:20px; display:flex; flex-direction:column; gap:13px; border-left:1px solid var(--line); padding-right:16px; }.process-list b { color:var(--copper); font-size:12px; font-weight:400; }.process-list span { color:#c4beb4; font-size:13px; }
.services-section { background:var(--paper); color:var(--ink); }.services-section .eyebrow { color:#a27343; }.services-section .section-intro { color:#6c685f; max-width:500px; margin:20px 0 44px; }.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.service-card { text-align:right; position:relative; min-height:490px; overflow:hidden; padding:0; background:#292721; color:var(--paper); }.service-card img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .6s var(--ease); }.service-card:hover img,.service-card.active img { transform:scale(1.05); }.service-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,12,10,.9),rgba(12,12,10,.05) 70%); }.service-number { position:absolute; top:20px; right:20px; color:var(--copper); font-size:13px; }.service-content { position:absolute; bottom:25px; right:23px; left:23px; z-index:1; }.service-content>span { color:var(--copper); font-size:12px; }.service-content h3 { font-family:'Readex Pro'; font-size:24px; font-weight:500; margin:10px 0; }.service-content p { color:#c5c0b6; font-size:13px; line-height:1.8; max-height:0; overflow:hidden; opacity:0; transition:max-height .35s var(--ease),opacity .35s; }.service-card:hover .service-content p,.service-card.active .service-content p { max-height:100px; opacity:1; }.service-content b { display:flex; align-items:center; gap:8px; color:var(--copper); font-size:12px; font-weight:400; margin-top:18px; }
.work-section { background:#f3f0e8; color:var(--ink); }.work-head { display:flex; align-items:end; justify-content:space-between; gap:40px; }.work-head>p { max-width:440px; margin:0; color:#68635b; }.filters { display:flex; gap:25px; border-bottom:1px solid #d6d1c7; margin-top:58px; margin-bottom:42px; }.filters button { background:none; color:#8b857b; padding:0 0 15px; font-size:12px; border-bottom:2px solid transparent; }.filters button.selected { color:var(--ink); border-color:var(--copper); }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:45px 20px; }.gallery-card:nth-child(2),.gallery-card:nth-child(5) { margin-top:55px; }.gallery-image { width:100%; aspect-ratio:1.22; position:relative; overflow:hidden; padding:0; background:#d5d0c6; }.gallery-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }.gallery-image:hover img { transform:scale(1.06); }.gallery-image>span { position:absolute; bottom:14px; left:14px; width:38px; height:38px; background:var(--paper); color:var(--ink); display:grid; place-items:center; }.gallery-meta { padding:17px 3px 0; }.gallery-meta>span { color:#a27343; font-size:12px; }.gallery-meta h3 { font-family:'Readex Pro'; font-size:21px; font-weight:500; margin:7px 0; }.gallery-meta small { color:#8a847b; font-size:11px; }.gallery-meta p { color:#6b675f; font-size:13px; line-height:1.9; margin:14px 0 0; }.work-section blockquote { max-width:800px; margin:120px auto 0; border-top:1px solid #d5d0c6; border-bottom:1px solid #d5d0c6; padding:34px 0; text-align:center; font-family:'Readex Pro'; font-size:21px; line-height:1.9; }.work-section cite { display:block; font-family:'IBM Plex Sans Arabic'; font-style:normal; color:#9e754a; font-size:12px; margin-top:15px; }
.identity-section { background:#181815; }.stats { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); align-self:end; }.stats div { padding:20px 12px; border-left:1px solid var(--line); }.stats b { display:block; color:var(--copper); font-family:'Readex Pro'; font-size:29px; font-weight:400; }.stats span { color:#a7a198; font-size:12px; display:block; margin-top:10px; }
.location-section { background:#d7d1c5; color:var(--ink); padding-top:100px; padding-bottom:100px; }.location-card { display:grid; grid-template-columns:1fr 1fr; min-height:480px; background:#e8e3da; }.location-card>div:first-child { padding:clamp(35px,6vw,80px); }.location-card .eyebrow { color:#9e754a; }.location-card h2,.contact-inner h2 { font-size:clamp(40px,5vw,70px); line-height:1.25; margin:22px 0; }.location-card p { max-width:420px; color:#706a60; line-height:2; }.map-placeholder { background:repeating-linear-gradient(45deg,#ded8cc,#ded8cc 2px,#d6d0c3 2px,#d6d0c3 4px); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9f7548; gap:10px; }.map-placeholder small { color:#898176; }
.contact-section { background:var(--copper); color:#171512; text-align:center; }.contact-inner { max-width:720px; margin:auto; }.contact-inner .eyebrow { color:#6f4c2f; }.contact-inner p { max-width:540px; margin:0 auto 28px; color:#59432d; line-height:2; }.contact-section .button-copper { background:#171512; color:var(--paper); }.contact-section .button-ghost { border-color:rgba(23,21,18,.35); color:#171512; }
footer { background:#11110f; padding:75px clamp(22px,8vw,140px) 25px; }.footer-top { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:35px; align-items:start; padding-bottom:70px; }.footer-top img { width:110px; }.footer-top p { color:#aaa39a; line-height:2; font-size:14px; }.footer-links,.socials { display:flex; flex-direction:column; gap:12px; font-size:12px; color:#9a9388; }.footer-links span,.socials>span { color:var(--copper); margin-bottom:4px; }.footer-links a:hover { color:var(--paper); }.socials button { background:none; text-align:right; color:#9a9388; display:flex; align-items:center; gap:7px; font-size:12px; }.footer-bottom { border-top:1px solid var(--line); color:#756f66; font-size:11px; display:flex; justify-content:space-between; padding-top:19px; }
.floating-actions { position:fixed; left:22px; bottom:22px; z-index:9999; display:flex; flex-direction:column; gap:9px; }.floating-actions a,.floating-actions button { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.28); pointer-events:auto; }.float-whatsapp { background:#25d366; color:#fff; }.float-phone { background:var(--copper); color:#191714; }.float-top { background:#292823; color:var(--paper); }.chat-callout { position:fixed; right:24px; bottom:24px; z-index:9998; background:#f3f0e8; color:#292721; padding:13px 17px; box-shadow:0 10px 35px rgba(0,0,0,.25); font-size:11px; display:flex; align-items:center; gap:15px; }.chat-callout a { color:#a27343; font-weight:600; }.toast { position:fixed; z-index:10001; left:50%; bottom:28px; transform:translateX(-50%); background:#292823; border:1px solid var(--copper); color:var(--paper); padding:13px 18px; font-size:12px; display:flex; align-items:center; gap:8px; box-shadow:0 12px 35px #0008; }
.modal-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.76); display:grid; place-items:center; padding:22px; }.notice-modal { background:var(--paper); color:var(--ink); width:min(510px,100%); padding:55px; position:relative; box-shadow:0 25px 80px #0008; overflow:hidden; }.notice-image { width:calc(100% + 110px); height:155px; object-fit:cover; margin:-55px -55px 34px; filter:saturate(.7); }.notice-modal .eyebrow { color:#9e754a; }.notice-modal h2 { font-size:43px; line-height:1.3; margin:18px 0; }.notice-modal p { color:#6d675e; line-height:2; font-size:14px; }.modal-close { position:absolute; top:17px; left:17px; width:36px; height:36px; display:grid; place-items:center; background:transparent; color:inherit; }.lightbox { width:min(1100px,100%); max-height:92vh; position:relative; display:grid; grid-template-columns:1.35fr .65fr; background:#161613; }.lightbox>img { width:100%; height:80vh; object-fit:cover; }.lightbox-caption { padding:70px 34px 30px; align-self:end; }.lightbox-caption span { color:var(--copper); font-size:12px; }.lightbox-caption h2 { font-size:31px; margin:13px 0; }.lightbox-caption p { color:#a9a299; line-height:2; font-size:13px; }.lightbox .modal-close { color:var(--paper); z-index:2; }.lightbox-prev,.lightbox-next { position:absolute; top:50%; width:40px; height:40px; display:grid; place-items:center; background:rgba(17,17,15,.75); color:var(--paper); }.lightbox-prev { right:15px; }.lightbox-next { left:15px; }
@media (max-width:800px){.site-header{height:74px;top:32px}.site-header nav{display:none;position:absolute;top:74px;right:0;left:0;background:#181815;padding:25px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.site-header nav.nav-open{display:flex}.nav-phone{border:0;padding:0}.menu-button{display:grid;place-items:center;background:none}.hero{min-height:auto;padding-top:165px}.section-grid,.location-card{grid-template-columns:1fr}.hero-copy{order:2}.hero-visual{order:1}.services-grid,.gallery-grid{grid-template-columns:1fr}.gallery-card:nth-child(2),.gallery-card:nth-child(5){margin-top:0}.work-head{display:block}.work-head>p{margin-top:25px}.filters{gap:17px;overflow:auto}.footer-top{grid-template-columns:1fr 1fr}.chat-callout{right:15px;bottom:15px;left:15px;justify-content:space-between}.floating-actions{bottom:72px}.lightbox{grid-template-columns:1fr;max-height:90vh;overflow:auto}.lightbox>img{height:48vh}.lightbox-caption{padding:25px}.notice-modal{padding:40px 28px}.hero-note{margin-top:35px}.process-list{margin-top:40px}.stats{margin-top:40px}.map-placeholder{min-height:270px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Reference-matched social rail and gallery controls */
.work-counter { display:flex; align-items:center; justify-content:center; gap:18px; margin:38px 0 8px; color:#8b857b; font-size:11px; direction:ltr; }
.work-counter button { width:30px; height:30px; display:grid; place-items:center; background:transparent; color:#8b857b; border:1px solid #d6d1c7; }
.work-counter button:hover { color:#a27343; border-color:#a27343; }
.float-social { background:#282722; color:#eee8dd; border:1px solid rgba(243,240,232,.18); font-size:17px; }
.float-social:hover { background:#c99b68; color:#171512; }
.social-glyph { display:inline-grid; place-items:center; line-height:1; font-weight:600; }
.facebook-glyph { font-family:Arial,sans-serif; font-size:20px; }
.snapchat-glyph { font-size:21px; }
.tiktok-glyph { font-size:20px; }
.notice-modal .button { margin-top:8px; }
@media (max-width:800px){ .floating-actions { gap:7px; left:14px; } .floating-actions a,.floating-actions button { width:39px; height:39px; } .chat-callout { font-size:10px; } }

/* Theme, motion branding, and quick WhatsApp brief */
.site-shell.theme-light { --ink:#f3f0e8; --paper:#171613; --muted:#625d55; --line:rgba(23,22,19,.16); background:#f3f0e8; color:#171613; }
.site-shell.theme-light .dark-section,.site-shell.theme-light .identity-section,.site-shell.theme-light footer { background:#e8e3da; color:#171613; }
.site-shell.theme-light .hero { background:radial-gradient(circle at 75% 45%,#fffdf8 0,#f3f0e8 48%); }
.site-shell.theme-light .site-header.is-scrolled { background:rgba(243,240,232,.9); }
.site-shell.theme-light .site-header nav,.site-shell.theme-light .hero-copy>p,.site-shell.theme-light .lead,.site-shell.theme-light .section-intro,.site-shell.theme-light .work-head>p { color:#625d55; }
.site-shell.theme-light .announcement { background:#e8e3da; color:#625d55; }
.site-shell.theme-light .chat-callout { background:#171613; color:#f3f0e8; }
.header-tools { display:flex; align-items:center; gap:14px; }
.theme-toggle { width:34px; height:34px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); color:var(--copper); border-radius:50%; }
.brand-motion { display:flex; align-items:center; gap:13px; width:max-content; max-width:100%; margin:12px 0 5px; padding:8px 14px 8px 10px; border-right:2px solid var(--copper); animation:brandFloat 4s ease-in-out infinite; }
.brand-motion img { width:138px; height:auto; object-fit:contain; }
.brand-motion span { color:var(--copper); font-size:11px; letter-spacing:.08em; }
@keyframes brandFloat { 0%,100%{transform:translateX(0);opacity:.9} 50%{transform:translateX(-7px);opacity:1} }
.promo-fade { animation:fadeIn .26s var(--ease) both; }
.promo-fade.is-closing { animation:fadeOut .26s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }
.quick-brief { background:#201f1b; padding-top:95px; padding-bottom:95px; }
.quick-brief-card { max-width:1100px; margin:auto; padding:clamp(28px,5vw,62px); display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; background:#292721; border:1px solid rgba(201,155,104,.28); }
.quick-brief-copy h2 { font-size:clamp(36px,4vw,59px); line-height:1.35; margin:18px 0; }
.quick-brief-copy p { color:#aaa39a; line-height:2; max-width:360px; }
.brief-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }
.brief-form label { display:flex; flex-direction:column; gap:7px; color:#cfc8bd; font-size:12px; }
.brief-form input,.brief-form textarea { width:100%; border:1px solid rgba(243,240,232,.18); background:#171613; color:#f3f0e8; padding:12px 13px; outline:none; resize:vertical; font:inherit; font-size:12px; }
.brief-form input:focus,.brief-form textarea:focus { border-color:var(--copper); box-shadow:0 0 0 3px rgba(201,155,104,.12); }
.brief-details,.brief-form .button { grid-column:1 / -1; }
.brief-form .button { justify-self:start; }
@media (max-width:800px){ .header-tools { gap:8px; } .brand-motion img { width:112px; } .quick-brief-card { grid-template-columns:1fr; gap:30px; } .brief-form { grid-template-columns:1fr; } .brief-details,.brief-form .button { grid-column:auto; } .brief-form .button { width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .brand-motion,.promo-fade { animation:none!important; } }

.brand-icon { width:19px; height:19px; display:block; object-fit:contain; }
.float-whatsapp .brand-icon { width:23px; height:23px; }
.socials .brand-icon { width:16px; height:16px; }
.promo-fade { inset:auto 24px 24px auto; padding:0; display:block; background:transparent; pointer-events:none; }
.promo-fade .notice-modal { pointer-events:auto; width:min(390px,calc(100vw - 32px)); padding:24px; box-shadow:0 16px 45px rgba(0,0,0,.25); }
.promo-fade .notice-image { width:calc(100% + 48px); height:92px; margin:-24px -24px 22px; }
.promo-fade .notice-modal h2 { font-size:28px; margin:10px 0; }
.promo-fade .notice-modal p { font-size:12px; line-height:1.8; margin-bottom:12px; }
.promo-fade .modal-close { top:9px; left:9px; width:30px; height:30px; background:rgba(243,240,232,.88); border-radius:50%; }
@media (max-width:800px){ .promo-fade { inset:auto 15px 15px auto; } .promo-fade .notice-modal { padding:20px; } .promo-fade .notice-image { width:calc(100% + 40px); height:76px; margin:-20px -20px 18px; } }

.brand-icon { width:19px; height:19px; display:block; object-fit:contain; }
.float-whatsapp .brand-icon { width:23px; height:23px; }
.socials .brand-icon { width:16px; height:16px; }
.promo-fade { inset:auto 24px 24px auto; padding:0; display:block; background:transparent; pointer-events:none; }
.promo-fade .notice-modal { pointer-events:auto; width:min(390px,calc(100vw - 32px)); padding:24px; box-shadow:0 16px 45px rgba(0,0,0,.25); }
.promo-fade .notice-image { width:calc(100% + 48px); height:92px; margin:-24px -24px 22px; }
.promo-fade .notice-modal h2 { font-size:28px; margin:10px 0; }
.promo-fade .notice-modal p { font-size:12px; line-height:1.8; margin-bottom:12px; }
.promo-fade .modal-close { top:9px; left:9px; width:30px; height:30px; background:rgba(243,240,232,.88); border-radius:50%; }
@media (max-width:800px){ .promo-fade { inset:auto 15px 15px auto; } .promo-fade .notice-modal { padding:20px; } .promo-fade .notice-image { width:calc(100% + 40px); height:76px; margin:-20px -20px 18px; } }

/* Header refinement: static navigation, independent transparent identity mark */
.site-header { position:absolute; background:transparent; backdrop-filter:none; }
.site-header.is-scrolled { background:transparent; backdrop-filter:none; border-bottom:0; }
.site-header .brand { position:fixed; top:50px; right:clamp(22px,5vw,80px); z-index:10001; display:block; background:transparent; }
.site-header .brand img { width:154px; max-width:none; background:transparent; filter:drop-shadow(0 5px 12px rgba(0,0,0,.18)); }
.site-header nav { background:transparent; }
.brand-motion { display:none; }
@media (max-width:800px){ .site-header .brand { top:48px; right:18px; } .site-header .brand img { width:112px; } .site-header nav.nav-open { top:74px; } }

/* Interaction fixes */
html[data-theme="light"], body[data-theme="light"] { background:#f3f0e8; color:#171613; }
html[data-theme="dark"], body[data-theme="dark"] { background:#11110f; color:#f3f0e8; }
.theme-toggle { position:relative; z-index:10002; pointer-events:auto; transition:transform .18s var(--ease), background .18s var(--ease); }
.theme-toggle:hover { transform:scale(1.08); background:rgba(201,155,104,.12); }
.gallery-image { cursor:zoom-in; }
.zoom-badge { display:flex!important; align-items:center; justify-content:center; gap:5px; min-width:38px; width:auto!important; padding:0 9px; }
.zoom-badge small { font-size:10px; font-family:'IBM Plex Sans Arabic',sans-serif; }
.lightbox-backdrop { cursor:zoom-out; }
.lightbox { cursor:default; animation:lightboxIn .26s var(--ease) both; }
@keyframes lightboxIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
.floating-actions a,.floating-actions button { width:54px; height:54px; }
.floating-actions svg { width:25px; height:25px; }
.floating-actions .brand-icon { width:28px; height:28px; }
.float-whatsapp .brand-icon { width:30px; height:30px; }
@media (max-width:800px){ .floating-actions { gap:9px; left:14px; bottom:76px; } .floating-actions a,.floating-actions button { width:50px; height:50px; } .floating-actions svg { width:23px; height:23px; } .floating-actions .brand-icon { width:26px; height:26px; } .float-whatsapp .brand-icon { width:28px; height:28px; } }

/* Header alignment: logo remains right; navigation and mode controls sit opposite it. */
.site-header { justify-content:flex-start; direction:ltr; }
.site-header nav { order:1; margin-left:clamp(22px,5vw,80px); direction:rtl; }
.site-header .header-tools { order:2; margin-left:22px; direction:ltr; }
.site-header .brand { direction:rtl; }
@media (max-width:800px){ .site-header { justify-content:flex-start; } .site-header nav { margin-left:0; } .site-header .header-tools { margin-left:12px; } }

/* Accessible contrast and interaction polish */
.site-shell.theme-light .site-header nav { color:#4a453e; }
.site-shell.theme-light .site-header nav a:hover { color:#171613; }
.site-shell.theme-light .hero-copy>p { color:#5f5a53; }
.site-shell.theme-light .hero-note { color:#615b53; }
.site-shell.theme-light .mini-label span { color:#6d665d; }
.site-shell.theme-light .button-ghost { color:#3e3933; border-color:rgba(23,22,19,.32); }
.site-shell.theme-light .button-ghost:hover { color:#8f6239; border-color:#a27343; }
.site-shell.theme-light .dark-section .lead { color:#d7d1c8; }
.site-shell.theme-light .dark-section .section-heading h2 { color:#fbf8f1; }
.site-shell.theme-light .dark-section .process-list { border-color:rgba(243,240,232,.28); }
.site-shell.theme-light .dark-section .process-list div { border-color:rgba(243,240,232,.22); }
.site-shell.theme-light .dark-section .process-list span { color:#eee8df; }
.site-shell.theme-light .dark-section .process-list b { color:#d8a979; }
.site-shell.theme-light .work-section .gallery-meta h3 { color:#171613; }
.site-shell.theme-light .work-section .gallery-meta p { color:#514c45; }
.site-shell.theme-light .work-section .gallery-meta small { color:#625d55; }
.site-shell.theme-light .work-section blockquote { color:#25221e; }
.site-shell.theme-light .location-card p { color:#514c45; }
.site-shell.theme-dark .site-header nav { color:#c8c1b8; }
.service-card { cursor:pointer; }
.service-card:focus-visible,.gallery-image:focus-visible,.theme-toggle:focus-visible,.float-top:focus-visible { outline:2px solid var(--copper); outline-offset:4px; }
.brief-form button:disabled { opacity:.72; cursor:wait; }
.form-feedback { color:#5c4026; font-size:12px; line-height:1.8; margin:14px 0 0; }
.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.float-top { animation:backTopIn .2s var(--ease) both; }
@keyframes backTopIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Final interaction polish: filter transitions, validation, and accessible back-to-top tooltip */
.gallery-grid { transition:opacity .16s var(--ease), transform .16s var(--ease); }
.gallery-grid.is-filtering { opacity:0; transform:translateY(10px); }
.gallery-card { animation:galleryCardIn .28s var(--ease) both; }
@keyframes galleryCardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.gallery-card:nth-child(2) { animation-delay:.03s; } .gallery-card:nth-child(3) { animation-delay:.06s; }
.float-top { position:relative; transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
.float-top:hover { transform:translateY(-5px) scale(1.08); background:var(--copper); color:#171512; box-shadow:0 12px 30px rgba(201,155,104,.4); }
.float-top::after { content:attr(data-tooltip); position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(4px); opacity:0; pointer-events:none; white-space:nowrap; background:#171512; color:#f3f0e8; padding:7px 10px; font-size:10px; transition:opacity .18s var(--ease),transform .18s var(--ease); }
.float-top:hover::after,.float-top:focus-visible::after { opacity:1; transform:translateY(-50%) translateX(0); }
.field-error { display:block; color:#9c3f32; font-size:11px; line-height:1.6; margin-top:6px; }
.brief-form input[aria-invalid="true"],.brief-form textarea[aria-invalid="true"] { border-color:#b54e40; box-shadow:0 0 0 2px rgba(181,78,64,.12); }
@media (prefers-reduced-motion:reduce){ .gallery-grid,.gallery-card,.float-top,.float-top::after { animation:none; transition:none; } }

/* Contrast system: light mode uses dark ink on light sections, never white on ivory. */
.site-shell.theme-light .dark-section,
.site-shell.theme-light .identity-section { background:#e8e3da; color:#171613; }
.site-shell.theme-light .dark-section .section-heading h2,
.site-shell.theme-light .identity-section .section-heading h2 { color:#171613; }
.site-shell.theme-light .dark-section .lead,
.site-shell.theme-light .identity-section .lead { color:#514c45; }
.site-shell.theme-light .dark-section .process-list { border-color:rgba(23,22,19,.22); }
.site-shell.theme-light .dark-section .process-list div { border-color:rgba(23,22,19,.18); }
.site-shell.theme-light .dark-section .process-list span,
.site-shell.theme-light .identity-section .stats span { color:#514c45; }
.site-shell.theme-light .dark-section .process-list b,
.site-shell.theme-light .identity-section .stats b { color:#9e6e3f; }
.site-shell.theme-light .identity-section .stats { border-color:rgba(23,22,19,.22); }
.site-shell.theme-light .identity-section .stats div { border-color:rgba(23,22,19,.18); }
.site-shell.theme-light footer { color:#171613; }
.site-shell.theme-light footer p,
.site-shell.theme-light footer .footer-links,
.site-shell.theme-light footer .socials,
.site-shell.theme-light footer .socials button { color:#514c45; }
.site-shell.theme-light footer .footer-bottom { color:#625d55; border-color:rgba(23,22,19,.18); }
.site-shell.theme-light .section-intro { color:#514c45; }