:root{--ink:#102e42;--teal:#087e83;--muted:#536675;--line:#dce5e9;--paper:#fff;--wash:#f4f8fa;--font:Tahoma,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);font-size:16px;line-height:1.85}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}a,button{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #e09e2b;outline-offset:5px}::selection{background:#c7ecea}.container{width:min(1180px,calc(100% - 96px));margin-inline:auto}.header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-weight:700;white-space:nowrap}.monogram{font-family:Arial,sans-serif;direction:ltr;font-size:32px;line-height:1;font-weight:800;letter-spacing:-3px}.monogram span{color:var(--teal)}nav{display:flex;gap:32px;font-size:14px}nav a{padding:10px 0;position:relative}nav a:after{content:"";position:absolute;bottom:4px;inset-inline-start:0;width:0;height:2px;background:var(--teal);transition:width .2s}nav a:hover:after{width:100%}.language{background:none;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 15px;min-height:44px;cursor:pointer;font-size:14px;display:flex;gap:14px;align-items:center}.language:hover{background:var(--wash)}.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:80px;padding-block:64px 72px}.eyebrow{font-size:13px;font-weight:700;letter-spacing:.035em;color:var(--teal);margin:0 0 22px}.hero h1{font-size:clamp(64px,7.6vw,104px);line-height:1.25;margin:0 0 20px;letter-spacing:-3px;font-weight:700}.accent{color:var(--teal)}.hero-role{font-size:17px;font-weight:700;margin:0 0 18px}.hero-description{max-width:500px;color:var(--muted);margin:0 0 28px;font-size:17px;line-height:1.95}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:12px 23px;border-radius:5px;font-size:14px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:white}.primary:hover{background:var(--teal)}.secondary{border:1px solid var(--line);background:white}.secondary:hover{background:var(--wash)}.hero-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:32px}.hero-meta span+span{border-inline-start:1px solid var(--line);padding-inline-start:18px}.portrait-wrap{position:relative;padding-inline-start:18px}.portrait-frame{height:518px;border-radius:160px 160px 6px 6px;overflow:hidden;background:#f1f5f7;border:1px solid var(--line);position:relative}.portrait{width:100%;height:100%;object-fit:cover;object-position:center 18%;mix-blend-mode:multiply}.portrait-caption{display:flex;gap:12px;align-items:center;margin-top:18px;font-size:12px}.caption-line{width:30px;height:2px;background:var(--teal)}.caption-no{margin-inline-start:auto;color:var(--muted);font-family:Arial,sans-serif;direction:ltr;font-size:11px;letter-spacing:1px}.section{padding-block:96px}.about{background:var(--wash);border-block:1px solid var(--line)}.section-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:96px}h2{font-size:clamp(28px,3.1vw,40px);line-height:1.5;letter-spacing:-1px;margin:0;font-weight:700}.intro{font-size:18px;line-height:2.15;margin:0 0 32px;color:#334c5b}.education{position:relative;border-top:1px solid #cddce2;padding-top:24px;display:grid;gap:3px;padding-inline-end:105px;font-size:14px}.small-label{font-size:12px;letter-spacing:.03em;color:var(--teal);font-weight:700}.education strong{font-size:16px}.date{position:absolute;inset-inline-end:0;bottom:0;direction:ltr;font-family:Arial,sans-serif;color:var(--muted)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}.heading-aside{font-size:14px;color:var(--muted);margin:0}.experience-row{display:grid;grid-template-columns:210px 1fr 40px;gap:32px;padding:36px 0;border-top:1px solid var(--line)}.experience-row:last-child{border-bottom:1px solid var(--line)}.experience-date{font-size:14px;color:var(--muted);padding-top:3px}.experience-index{color:#a7b8c2;font:22px Arial,sans-serif;direction:ltr;text-align:end}h3{font-size:23px;line-height:1.5;margin:8px 0 16px}.experience-row ul{margin:0;padding-inline-start:19px;color:var(--muted);font-size:15px;line-height:2}.experience-row li::marker{color:var(--teal)}.projects{background:var(--wash)}.featured-project{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.project-visual{background:#e6eff1;position:relative;padding:44px 60px 56px;min-height:410px;overflow:hidden;direction:ltr}.desktop-shot{display:block;width:88%;border:1px solid #cad9df;border-radius:8px;overflow:hidden;box-shadow:0 18px 35px #102e4212;transition:transform .25s}.desktop-shot:hover{transform:translateY(-3px)}.browser-bar{background:#fff;height:28px;display:flex;align-items:center;gap:5px;padding:0 12px}.browser-bar i{height:5px;width:5px;border-radius:50%;background:#bacbd3}.browser-bar span{font:9px Arial,sans-serif;color:#526b7a;margin:auto}.desktop-shot img{width:100%;height:auto}.mobile-shot{position:absolute;right:44px;bottom:38px;width:17%;max-height:360px;overflow:hidden;border:6px solid #fff;border-radius:22px;box-shadow:0 15px 32px #102e4226;transition:transform .25s}.mobile-shot:hover{transform:translateY(-3px)}.mobile-shot img{width:100%;height:auto}.visual-caption{position:absolute;bottom:17px;left:60px;font-size:10px;letter-spacing:1px;color:#4e6876}.project-body{padding:38px 44px;display:grid;grid-template-columns:1fr 1.1fr;column-gap:56px}.project-number{grid-column:1/-1;font-size:12px;color:var(--teal);font-weight:700}.project-body h3{font-size:30px;grid-column:1;margin:10px 0 14px}.project-body>p{grid-column:1;grid-row:3/5;margin:0;color:var(--muted);font-size:15px}.project-role{grid-column:2;grid-row:2/4;border-inline-start:1px solid var(--line);padding-inline-start:32px;align-self:center}.project-role p{font-size:15px;margin:8px 0;color:var(--muted)}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{background:var(--wash);padding:5px 12px;font-size:12px;border-radius:4px}.project-body>.tags{grid-column:2;padding-inline-start:32px;margin-top:15px}.secondary-project{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:32px;border-block:1px solid #ccdce2;padding:30px 0;margin-top:28px}.secondary-mark{font:36px Arial,sans-serif;color:var(--teal);direction:ltr}.secondary-mark span{display:block;font-size:10px;letter-spacing:2px;margin-top:8px}.secondary-project h3{margin:4px 0 8px}.secondary-project p{margin:0;color:var(--muted);font-size:15px}.outline-tag{border:1px solid #c5d6de;border-radius:5px;padding:5px 12px;font-size:12px}.skill-group{margin-bottom:32px}.skill-group h3,.courses h3{font-size:18px;margin:0 0 17px}.skills-tags span{font-size:14px;padding:8px 14px;border:1px solid var(--line);background:white}.courses>div{display:flex;align-items:center;gap:22px;padding:14px 0;border-top:1px solid var(--line)}.courses>div>span{font:12px Arial,sans-serif;color:var(--teal)}.courses strong{font-weight:400;font-size:15px}.languages{display:flex;gap:28px;font-size:14px;margin:25px 0 0}.languages>span{color:var(--muted)}.contact{background:var(--ink);color:#fff;padding-top:72px}.contact .eyebrow{color:#83d3ce}.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:100px}.contact h2{font-size:40px;line-height:1.6}.contact p:not(.eyebrow){color:#c6d4dd;max-width:460px;font-size:15px;margin:20px 0 28px}.light{background:#fff;color:var(--ink)}.light:hover{background:#d7efec}.contact-links{align-self:center;min-width:0}.contact-links>a{display:block;border-bottom:1px solid #395263;padding:20px 0}.contact-links .small-label{color:#99b6c5}.contact-value{display:flex;justify-content:space-between;gap:15px;font-size:18px;margin-top:7px;overflow-wrap:anywhere}.contact-links a:hover .contact-value{color:#83d3ce}.contact-location{font-size:13px;color:#c6d4dd;margin-top:22px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #395263;margin-top:70px;padding-block:28px;font-size:12px;color:#c6d4dd}footer .brand{font-size:14px;color:white}footer .monogram span{color:#83d3ce}.skip-link{position:fixed;top:-100px;inset-inline-start:20px;z-index:100;background:white;padding:10px 20px}.skip-link:focus{top:10px}[dir=ltr] .hero h1{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:-5px;line-height:1.06;font-size:clamp(64px,7vw,98px)}[dir=ltr] h2{letter-spacing:-1.4px;line-height:1.25}[dir=ltr] .hero-role{font-size:16px}[dir=ltr] .intro{line-height:1.85}[dir=ltr] .eyebrow{letter-spacing:1.5px;font-size:11px}[dir=ltr] .hero-description{line-height:1.8}
@media(min-width:900px){.hero-copy{animation:arrive .6s ease-out}.portrait-wrap{animation:arrive .8s ease-out}}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.container{width:calc(100% - 56px)}.hero{gap:40px}.hero h1{font-size:78px}.portrait-frame{height:470px}.section-grid{gap:45px;grid-template-columns:1fr 1.5fr}.contact-grid{gap:48px}.experience-row{grid-template-columns:150px 1fr 25px;gap:24px}.project-visual{min-height:340px}.contact-value{font-size:16px}.hero-meta{font-size:11px;gap:10px}.hero-meta span+span{padding-inline-start:10px}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.nav-wrap{height:auto;min-height:76px;flex-wrap:wrap;gap:10px;padding-block:15px}.brand{font-size:14px}.monogram{font-size:28px}nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid var(--line);padding-top:6px}nav a{min-height:40px}.language{margin-inline-start:auto}.hero{grid-template-columns:1fr;gap:38px;padding-block:38px 48px}.hero h1{font-size:76px;line-height:1.15;margin-bottom:22px}.hero h1 br{display:none}.hero h1 .accent{margin-inline-start:10px}.hero-role{font-size:15px}.hero-description{font-size:16px}.hero .eyebrow{font-size:12px;margin-bottom:20px}.hero-meta{font-size:11px;margin-top:23px}.portrait-wrap{padding:0;width:min(100%,400px);margin-inline:auto}.portrait-frame{height:410px;border-radius:130px 130px 5px 5px}.portrait{object-position:center 17%}.section{padding-block:56px}.section-grid{grid-template-columns:1fr;gap:28px}h2{font-size:30px}.eyebrow{margin-bottom:14px}.intro{font-size:16px;line-height:2}.section-heading{display:block;margin-bottom:28px}.heading-aside{display:block;margin-top:15px}.heading-aside br{display:none}.experience-row{grid-template-columns:1fr;gap:12px;padding:28px 0;position:relative}.experience-index{position:absolute;inset-inline-end:0;top:28px;font-size:18px}.experience-date{font-size:13px}.experience-row h3{font-size:20px}.experience-row ul{font-size:14px}.project-visual{padding:28px 20px 50px;min-height:245px}.desktop-shot{width:94%;margin-bottom:25px}.mobile-shot{width:24%;right:17px;bottom:25px;max-height:215px;border-width:4px;border-radius:13px}.browser-bar{height:19px}.visual-caption{left:20px;bottom:13px;font-size:8px}.project-body{padding:25px;display:block}.project-body h3{font-size:27px}.project-body>p{font-size:14px}.project-role{border-inline-start:0;border-top:1px solid var(--line);padding:18px 0 0;margin-top:20px}.project-role p{font-size:14px}.project-body>.tags{padding:0}.secondary-project{grid-template-columns:45px 1fr;gap:15px;padding:25px 0}.secondary-mark{font-size:25px;align-self:start}.secondary-mark span{font-size:8px}.secondary-project h3{font-size:22px}.secondary-project p{font-size:14px}.outline-tag{grid-column:2;justify-self:start}.education{padding-inline-end:0;padding-bottom:30px}.date{inset-inline-start:0;inset-inline-end:auto}.contact{padding-top:50px}.contact-grid{grid-template-columns:1fr;gap:24px}.contact h2{font-size:32px}.contact-links{width:100%}.contact-value{font-size:17px}footer{flex-wrap:wrap;margin-top:40px;padding-block:24px;gap:20px}footer .brand{width:100%}footer>a:last-child{margin-inline-start:auto}[dir=ltr] .hero h1{font-size:58px;letter-spacing:-3px}[dir=ltr] .hero h1 br{display:block}[dir=ltr] .hero h1 .accent{margin:0}[dir=ltr] .hero-role{font-size:14px}html{scroll-padding-top:140px}}
/* Keep grid children inside their columns, including unbroken Arabic headings. */
.hero,.section-grid,.contact-cards,.project-body{min-width:0}
.hero>*,.section-grid>*,.experience-row>*,.secondary-project>*,.project-body>*{min-width:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .eyebrow{letter-spacing:normal}
.education{padding-inline-end:0;padding-bottom:0;gap:8px}
.education .date{position:static;inset:auto;justify-self:start;display:block;margin-top:4px;line-height:1.6}
.section-title,[dir=ltr] .section-title{font-size:22px;line-height:1.6;letter-spacing:normal;margin:0;color:var(--teal)}
.contact{padding-top:48px}
.contact .section-title{color:#a4e1dc;font-size:22px;margin-bottom:24px}
.contact-cards{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:16px}
.contact-cards>a{display:block;min-width:0;padding:24px;border:1px solid #496271;border-radius:8px;transition:background .2s,border-color .2s}
.contact-cards>a:hover{background:#193c50;border-color:#83d3ce}
.contact-cards .small-label{color:#b3d2df}
.contact-value{font-size:16px;gap:12px;line-height:1.7}
.contact-value bdi{min-width:0;overflow-wrap:anywhere}
.contact-value>span:last-child{flex-shrink:0}
.site-footer{display:grid;grid-template-columns:1fr auto auto;gap:32px;margin-top:40px;padding-block:28px;align-items:center}
.footer-identity{display:grid;gap:12px}
.footer-location{font-size:12px;color:#c6d4dd}
.copyright{font-size:12px}
.back-top{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:8px 14px;border:1px solid #496271;border-radius:5px}
.back-top:hover{background:#193c50}
@media(max-width:1000px){.contact-cards{grid-template-columns:1fr}.contact-cards>a{padding:20px}.site-footer{grid-template-columns:1fr auto}.copyright{grid-row:2;grid-column:1/-1}.back-top{grid-column:2;grid-row:1}}
@media(max-width:760px){
 .hero{grid-template-columns:minmax(0,1fr)}
 .section-grid{grid-template-columns:minmax(0,1fr)}
 .hero h1,[dir=rtl] .hero h1{font-size:clamp(44px,13vw,66px);line-height:1.4;letter-spacing:normal}
 .hero h1 br{display:block}
 .hero h1 .accent{margin-inline-start:0}
 .hero-role,.hero-description{overflow-wrap:break-word}
 .portrait-wrap{width:100%;max-width:400px;min-width:0}
 .actions{display:grid;grid-template-columns:1fr;width:100%}
 .button{width:100%;min-width:0;gap:18px}
 .hero-meta{display:grid;gap:8px;font-size:12px}
 .hero-meta span+span{border:0;padding:0}
 .education{padding:20px 0 0;gap:8px}
 .education .date{position:static;justify-self:start;margin-top:4px}
 .nav-wrap{gap:10px 16px}
 nav{gap:4px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
 nav a{font-size:13px;min-height:44px}
 .section-title,[dir=ltr] .section-title{font-size:21px}
 .section-heading{margin-bottom:24px}
 .contact-cards{gap:12px}
 .contact-value{font-size:15px}
 .site-footer{gap:24px 12px;margin-top:28px}
 .site-footer .brand{width:auto}
 .site-footer>a:last-child{margin-inline-start:0}
 .footer-location{font-size:11px}
 .back-top{font-size:12px;gap:8px;padding:8px 10px}
 .copyright{border-top:1px solid #395263;padding-top:20px;text-align:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Experience dates and content have separate, non-overlapping tracks. */
.experience-row{grid-template-columns:210px minmax(0,1fr)}
@media(max-width:1000px){.experience-row{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:760px){.experience-row{grid-template-columns:minmax(0,1fr)}.experience-date{position:static;line-height:1.8}}

.intro{white-space:pre-line}

.project-visit{grid-column:1/-1;justify-self:start;margin-top:26px}
.suqoor-project{margin-top:28px;padding:32px;background:white;border:1px solid var(--line);border-radius:10px}
.suqoor-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.suqoor-heading>div{min-width:0}.suqoor-heading .outline-tag{flex-shrink:0}
.suqoor-heading p{margin:0;font-size:15px;color:var(--muted)}
.suqoor-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:26px}
.suqoor-gallery figure{margin:0;min-width:0}
.suqoor-gallery a{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#080e18}
.suqoor-gallery img{width:100%;height:auto;aspect-ratio:2.22;object-fit:contain}
.suqoor-gallery figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media(max-width:760px){.suqoor-project{padding:24px}.suqoor-heading{display:block}.suqoor-heading .outline-tag{display:inline-block;margin-top:16px}.suqoor-gallery{grid-template-columns:minmax(0,1fr)}.suqoor-heading h3{font-size:23px}}