:root { color-scheme:light; --wine:#701c2a; --ink:#21191a; --bone:#f3eee8; --sand:#d8c6bd; --line:rgba(112,28,42,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#8f4050 #171112; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#171112; }
::-webkit-scrollbar-thumb { background:#8f4050; border:2px solid #171112; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:#b26070; }
body { margin:0; background:var(--bone); color:var(--ink); font-family:"DM Sans",sans-serif; transition:background-color .35s ease,color .35s ease; }
main,footer { transition:opacity .24s ease; }
body.language-changing main,body.language-changing footer { opacity:.01; }
.hero { min-height:100svh; position:relative; overflow:hidden; color:#fff; background:#120e0f; isolation:isolate; padding:30px clamp(24px,5vw,76px) 40px; display:flex; flex-direction:column; }
.hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(14,9,10,.96) 0%,rgba(27,12,15,.73) 35%,rgba(26,9,13,.05) 72%),linear-gradient(0deg,rgba(0,0,0,.36),transparent 38%); }
.hero-top { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.top-actions { display:flex; align-items:center; gap:9px; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:9px; font-size:10px; font-weight:600; letter-spacing:.2em; }
.brand img { width:33px; height:24px; object-fit:contain; }
.save-button,.language-toggle { font:500 12px "DM Sans",sans-serif; color:#fff; border:1px solid rgba(255,255,255,.5); background:transparent; padding:11px 15px; cursor:pointer; border-radius:999px; transition:.25s ease; }
.save-button { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; border-color:rgba(205,115,132,.9); background:rgba(112,28,42,.72); box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.06) inset; animation:save-pulse 2.8s ease-in-out infinite; }
.save-button:before { content:""; width:5px; height:5px; flex:none; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:action-beacon 2.8s ease-out infinite; }
.save-button:after { content:""; position:absolute; inset:-2px auto -2px -35%; width:22%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transition:transform .55s ease; }
.save-button:hover:after,.save-button:focus-visible:after { transform:translateX(650%) skewX(-22deg); }
.save-button:hover,.save-button:focus-visible { background:#842538; color:#fff; transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.12) inset; }
.save-button:hover,.language-toggle:hover { background:#fff; color:var(--wine); }
.portrait-wrap { position:absolute; inset:0 0 0 32%; z-index:-1; overflow:hidden; }
.portrait { width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(8%) contrast(1.03); animation:portrait-in 1.2s cubic-bezier(.2,.8,.2,1) both; }
.portrait-halo { position:absolute; z-index:1; right:0; bottom:-36%; width:min(58vw,760px); aspect-ratio:1; border-radius:50%; background:rgba(112,28,42,.37); mix-blend-mode:screen; }
.hero-copy { margin:auto 0 6vh; max-width:730px; position:relative; z-index:1; animation:copy-in .9s .1s both; }
.eyebrow,.section-label { margin:0 0 16px; text-transform:uppercase; font-size:10px; letter-spacing:.2em; font-weight:600; }
h1,h2 { font-family:"Playfair Display",serif; font-weight:500; letter-spacing:-.055em; margin:0; line-height:.9; }
h1 { font-size:clamp(66px,10.4vw,156px); }
em { font-weight:500; }
.role { max-width:395px; margin:26px 0 0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.76); }
.scroll-cue { align-self:flex-end; color:#fff; text-decoration:none; font-size:11px; letter-spacing:.13em; text-transform:uppercase; display:flex; gap:11px; align-items:center; position:relative; z-index:1; }
.scroll-cue span { font-size:18px; animation:bob 1.8s infinite; }
.about,.expertise,.connect { padding:clamp(72px,11vw,150px) clamp(24px,10vw,154px); }
.section-label { color:var(--wine); }
.about-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(230px,.65fr); gap:clamp(36px,9vw,150px); align-items:end; }
h2 { font-size:clamp(43px,6.5vw,91px); }
.about-grid p { margin:0 0 7px; font-size:16px; line-height:1.72; color:#594c4c; }
.expertise { color:var(--bone); background:var(--wine); }
.expertise .section-label { color:#e9ccd1; }
ol { list-style:none; padding:0; margin:45px 0 0; border-top:1px solid rgba(255,255,255,.25); }
li { padding:21px 0; border-bottom:1px solid rgba(255,255,255,.25); display:flex; align-items:baseline; gap:clamp(25px,4vw,74px); font:clamp(24px,3vw,44px) "Playfair Display",serif; letter-spacing:-.035em; transition:.25s ease; }
li b { font:inherit; font-weight:inherit; }
li:hover { padding-left:12px; color:#f2cbd3; }
li span { font:500 10px "DM Sans",sans-serif; letter-spacing:.15em; color:#e2afb9; }
.connect { background:#e7ddd5; }
.connect h2 { margin-bottom:56px; }
.contact-actions { border-top:1px solid var(--line); }
.contact-actions a { display:grid; grid-template-columns:120px 1fr auto; gap:20px; padding:22px 0; text-decoration:none; color:var(--wine); border-bottom:1px solid var(--line); align-items:center; transition:.2s ease; }
.contact-actions a:hover { padding-left:12px; color:#a04c5c; }
.contact-actions span { font-size:12px; text-transform:uppercase; letter-spacing:.15em; }
.contact-actions strong { font-size:clamp(15px,2vw,21px); font-weight:500; overflow-wrap:anywhere; }
.contact-actions b { font-size:20px; font-weight:400; }
footer { background:#21191a; color:#e5d8d1; min-height:135px; padding:28px clamp(24px,5vw,76px); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.footer-brand img { filter:brightness(0) invert(1); opacity:.9; }
footer p { font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin:0; color:#b6a9a4; }
@keyframes copy-in { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes portrait-in { from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }
@keyframes bob { 50%{transform:translateY(5px)} }
@keyframes save-pulse { 0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.06) inset; } 50% { box-shadow:0 10px 30px rgba(112,28,42,.28),0 0 0 1px rgba(255,255,255,.14) inset; } }
@keyframes action-beacon { 0%,42%,100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } 58% { box-shadow:0 0 0 5px rgba(255,255,255,0); } 72% { box-shadow:0 0 0 0 rgba(255,255,255,.65); } }
@media (prefers-reduced-motion:reduce) { .save-button,.save-button:before,.scroll-cue span { animation:none; } .save-button:after { transition:none; } }
html[dir="rtl"] body { font-family:"Noto Sans Arabic",sans-serif; }
html[dir="rtl"] .hero { direction:rtl; }
html[dir="rtl"] .portrait-wrap { inset:0 32% 0 0; }
html[dir="rtl"] .hero:after { background:linear-gradient(-100deg,rgba(14,9,10,.96) 0%,rgba(27,12,15,.73) 35%,rgba(26,9,13,.05) 72%),linear-gradient(0deg,rgba(0,0,0,.36),transparent 38%); }
html[dir="rtl"] .hero-copy,html[dir="rtl"] .about,html[dir="rtl"] .expertise,html[dir="rtl"] .connect { text-align:right; }
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] li { font-family:"Noto Sans Arabic",sans-serif; font-weight:600; letter-spacing:-.035em; line-height:1.1; }
html[dir="rtl"] h1 { line-height:.94; }
html[dir="rtl"] .role { color:rgba(255,255,255,.86); font-weight:500; }
html[dir="rtl"] .scroll-cue { align-self:flex-start; }
html[dir="rtl"] .contact-actions a { direction:rtl; }
html[dir="rtl"] .phone-number { direction:ltr; unicode-bidi:isolate; text-align:left; }
html[dir="rtl"] footer { direction:rtl; }
html[dir="rtl"] .footer-brand { direction:ltr; }
@media (min-width:1800px) and (min-aspect-ratio:19/10) { .portrait { object-position:center 35%; } }
@media (max-width:680px) { .hero { min-height:770px; padding-top:23px; } .hero-top { gap:10px; } .top-actions { gap:6px; flex:none; } .brand { gap:6px; font-size:8px; letter-spacing:.16em; } .brand img { width:27px; height:20px; } .save-button,.language-toggle { min-height:36px; padding:8px 10px; font-size:10px; line-height:1; white-space:nowrap; } .save-button { gap:5px; border-radius:10px; box-shadow:0 5px 14px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.06) inset; } .save-button:before { width:4px; height:4px; } .save-button:after { display:none; } .portrait-wrap,html[dir="rtl"] .portrait-wrap { inset:0 0 36% 0; opacity:.67; } .hero:after,html[dir="rtl"] .hero:after { background:linear-gradient(0deg,rgba(13,8,9,.98) 0%,rgba(18,9,11,.84) 42%,rgba(18,9,11,.05) 83%); } .hero-copy { margin:auto 0 0; } h1 { font-size:clamp(60px,19vw,100px); } html[dir="rtl"] h1 { font-size:clamp(55px,17vw,84px); line-height:1.02; } .role { font-size:13px; max-width:330px; } .scroll-cue { margin-top:40px; } .about-grid { grid-template-columns:1fr; } .about-grid p { font-size:15px; } .contact-actions a { grid-template-columns:70px minmax(0,1fr) auto; gap:12px; } footer { min-height:115px; align-items:flex-start; flex-direction:column; justify-content:center; } }